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

Question

我将 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>

这是它的渲染方式:

Answer 1

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

<Dialog> </Dialog>

), 将它们放在你使用的组件之外。

例子:

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

这样写

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

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