Css 材质UI对话框覆盖？

我正在使用React-Redux材质UI包：

我试图在用户登录后，在整个对话框组件上添加一个灰色覆盖，并带有一个圆形指示器

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

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”类将覆盖整个对话框？

材质ui对话框在内部呈现为一个内容容器，其位置为相对（）。因此，您可以使用position:absolute将装载容器更改为基于此内容容器定位。您还必须增加z索引，以便覆盖将位于顶部

使用css：

.loadingRoot{
背景颜色：蓝色；
位置：绝对位置；
z指数：2000；
排名：0；
左：0；
底部：0；
右：0；
}

使用内联样式：

内容