我正在使用 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”类覆盖整个对话框?
最佳答案
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>
关于css - Material-UI 对话框覆盖?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46375169/