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

【问题标题】：Dialog box in Material UI opens with a weird gray backgroundMaterial UI 中的对话框以奇怪的灰色背景打开
【发布时间】：2017-10-26 05:14:12
【问题描述】：

我将 Material UI 与 React 一起使用，并在点击按钮时弹出一个对话框。该按钮出现在表格中，而表格又出现在 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>

这是它的渲染方式：

【问题讨论】：

很奇怪。您需要检查 css 并查看效果来自何处。其他一些 css 可能会搞砸。
如果您可以添加任何 plunker 或 jsfiddle，它将帮助我们找到问题..
好像同时打开了很多对话框。

标签： javascript css reactjs dialog material-ui

【解决方案1】：

我现在有了解决方案。你的对话代码（

<Dialog> </Dialog>

)，把它们放在你使用的组件之外。

示例：

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

这样摆放

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

<Dialog> .............. </Dialog>

【讨论】：

惊人的达到目的，但为什么呢？
它对我有用但是为什么yyyyyyyyyyy?!!!!!!!!! ??????

【解决方案2】：

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

看起来同时打开了许多对话框。 – Mikhail Shabrikov 2017 年 10 月 26 日 9:07

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

【讨论】：