Material-UI 对话框覆盖？

Posted 2023-02-22

【中文标题】Material-UI 对话框覆盖？

【英文标题】：Material-UI dialog overlay?

【发布时间】：2018-03-04 15:36:10

【问题描述】：

我正在使用 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”类覆盖整个对话框？

【参考方案1】：

material-ui 对话框在内部使用内容容器呈现，该内容容器的位置为 relative (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>