如何在 material-ui 中创建非模态对话框

Question

我正在尝试在材质 ui 中创建一个不会阻止主要内容的对话框。

使用下面的代码，我只能隐藏背景但不能禁用背景。

 <Dialog open={this.state.open}  onClose={this.handleClose} hideBackdrop={true} > 

有人可以解决我关于如何使用不会阻止主要内容的 material-ui 创建模态的问题吗

Answer 1

我只是想将其作为单独的答案发布。OP 通过禁用根对话框/模式上的指针事件来解决他的问题：

const StyledDialog = withStyles({ 
  root: { pointerEvents: "none", }, 
  paper: { pointerEvents: "auto" } 
})(props => <Dialog hideBackdrop {...props} />);

我还测试了以下内容，它也有效（也应该与Modal组件一起使用）。请注意，我还必须使用disableEnforceFocus，它是模态组件的属性。您应该意识到这样做会对可访问性产生影响。您有责任正确处理可访问性。

<Dialog 
  disableEnforceFocus
  style={{ pointerEvents: 'none' }}
  PaperProps={{ style: { pointerEvents: 'auto' } }}
>
...
</Dialog>

Answer 2

此行为是模态固有的，并且Dialog基于Modal. 如果您不希望它阻止主要内容，那么一种选择是使用Popper而不是Dialog。