Question

我正在使用带有React的Material UI，并且在点击按钮时会出现一个对话框。该按钮存在于表格中，该表格又呈现在纸张组件上。问题是当我使用具有默认样式的对话框时，背景变为黑色。我尝试将样式设置为透明但现在我在对话框后面得到一个灰色的神器。具有默认样式的原始对话框：

具有透明属性的对话框：

    <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

我现在有解决方案。您的对话框代码（

message

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

示例：

var worker = new Worker('doWork.js');

worker.addEventListener('message', function(e) {
  console.log('Worker said: ', e.data);
}, false);

worker.postMessage('Hello World');

像这样放他们

<Dialog> </Dialog>

Answer 2

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

似乎同时打开了许多对话框。 – Mikhail Shabrikov '17 Oct 26'9:07

我至少在去年第三次回到此页面，因此添加了此答案，因为我一直都错过了这一点（并将对话保留在迭代器中）：）。

“材质”界面中的对话框打开，带有奇怪的灰色背景

2 个答案: