css - 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 )。因此，您可以使用 position: absolute; 将您的加载容器更改为基于此内容容器定位。您还必须增加 z-index，以便您的叠加层位于顶部。

使用 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>