I recently started using the React-Redux Material-UI package found at http://www.material-ui.com/#/components/dialog
My goal is to implement a grey overlay that blankets the entire dialog element, complete with a circular loading indicator after the user logs in.
I've been attempting to achieve this within the body of the dialog as shown below:
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>
This causes the dialog box to look like the following image:
https://i.stack.imgur.com/81muN.png
I'm looking for a way to ensure that the 'loadingRoot' class covers the entirety of the dialog. Any suggestions on how to make this work seamlessly?