Material-UI对话框叠加？

Question

我正在使用React-Redux Material-UI软件包：http : //www.material-ui.com/#/components/dialog

我尝试在用户登录后使用圆形指示器在整个对话框组件上添加灰色覆盖。

尝试在对话框主体中执行此操作，如下所示：

return <div>
            <Dialog
                title="Login"
                actions={actions}
                modal={false}
                open={this.props.open}
                onRequestClose={this.handleClose}>

                <div className="loadingRoot">
                    TEST TEST TEST  TEST TEST TESTTEST TEST TESTTEST TEST TESTTEST TEST TESTTEST TEST TESTTEST TEST TESTTEST TEST TESTTEST TEST TESTTEST TEST TESTTEST TEST TESTTEST TEST TESTTEST TEST TESTTEST TEST TESTTEST TEST TESTTEST TEST TESTTEST TEST TESTTEST TEST TESTTEST TEST TESTTEST TEST TEST
                </div>

                <div>
                    <TextField floatingLabelText='username' name='username' onChange={this.handleTextFieldChange} /><br />
                    <TextField floatingLabelText='password' name='password' onChange={this.handleTextFieldChange} />
                </div>
            </Dialog>
        </div>;

导致如下所示的对话框：

无论如何要使这项工作，所以'loadingRoot'类将覆盖整个对话框？

Answer 1

material-ui对话框在内部使用内容容器进行渲染，该内容容器的相对位置为（source）。因此，您可以基于以下内容容器将其放置位置更改为位置：绝对；。您还必须增加z索引，以使叠加层位于顶部。

使用CSS：

.loadingRoot {
  background-color: blue;
  position: absolute;
  z-index: 2000;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

使用内联样式：

<div style={{
  backgroundColor: 'blue',
  position: 'absolute',
  zIndex: 2000,
  top: 0,
  left: 0,
  bottom: 0,
  right: 0
}>
  Content
</div>