Material-UI对话框覆盖？

我使用的阵营-终极版材料的UI包：http://www.material-ui.com/#/components/dialog Material-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'类将覆盖整个对话框？

来源

2017-09-23 tweetypi

material-ui Dialog在内部呈现，内容容器的位置为，相对于（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>

来源

2017-09-23 07:16:51

Material-UI对话框覆盖？

回答

相关问题