Question

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

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

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

有人可以解决我有关如何使用material-ui创建模态的问题吗？

Answer 1

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

Answer 2

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

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

我还测试了以下内容，它也很好用（也应与Modal组件一起使用）。注意，我还必须使用disableEnforceFocus，它是Modal组件的属性。您应该注意，这样做会影响可访问性。正确处理辅助功能由您自己决定。

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

如何在Material-UI中创建非模态对话框

2 个答案: