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>