Material UI 中的对话框以奇怪的灰色背景打开

Question

我在 React 中使用 Material UI，并在点击按钮时出现一个对话框。 该按钮出现在表格中，而表格又显示在 Paper 组件上。 问题是当我使用默认样式的对话框时，背景变成黑色。 我尝试将样式设置为透明，但现在我在对话框后面得到了一个灰色工件。 具有默认样式的原始对话框：

具有透明属性的对话框：

    <Dialog
      title="ALERT - Confirm Action? "
      modal={false}
      overlayStyle={{backgroundColor: 'transparent'}}
      bodyStyle={{margin:0, padding:0}}
      actions={
        <div>
          <FlatButton
              label="Cancel"
              primary={true}
              onClick={this.handleCloseTwo}
          />
          <FlatButton
              label="Submit"
              type="submit"
              primary={true}
              keyboardFocused={true}
              onClick={() => {
                this.setState({ dialogTwo: false });
              }}
          />
        </div>
      }
      open={this.state.dialogTwo}
  >
  </Dialog>

这是它的呈现方式：

Answer 1

我现在有了解决方案。 您的对话代码 (

<Dialog> </Dialog>

)，将它们放在您使用的组件之外。

例子：

 <Table> .... <IconButton> Dialog Show </IconButton> <Dialog> .............. </Dialog> .... </Table>

把它们像这样

 <Table> .... <IconButton> Dialog Show </IconButton> .... </Table> <Dialog> .............. </Dialog>

Answer 2

如果有人仍然偶然发现这一点，并且不要在评论中注意到 Mikhail Shabrikov 的答案，因为它没有作为答案发布：

看起来许多对话框同时打开。 – 米哈伊尔·沙布里科夫 17 年 10 月 26 日 9:07

我至少在去年的第 3 次回到了这个页面，因此添加了这个答案，因为我一直错过这个（并且一直把我的对话框放在迭代器中）:)。