Dialog box in Material UI opens with a weird gray background

Question

Im using Material UI with React and have a dialog which comes up when a button is tapped. The button is present in a table which in turn is presented over a Paper component. The issue is when I use the dialog with default styling, the background turns black. I tried making the styling as transparent but now Im getting a gray artifact behind dialog. The original dialog with default styling:

The dialog with transparent attributes:

    <Dialog
      title="ALERT - Confirm Action? "
      modal={false}
      overlayStyle={{backgroundColor: 'transparent'}}
      bodyStyle={{margin:0, padding:0}}
      actions={
        <div>
          <FlatButton
              label="Cancel"
              primary={true}
              onClick={this.handleCloseTwo}
          />
          <FlatButton
              label="Submit"
              type="submit"
              primary={true}
              keyboardFocused={true}
              onClick={() => {
                this.setState({ dialogTwo: false });
              }}
          />
        </div>
      }
      open={this.state.dialogTwo}
  >
  </Dialog>

This is how it renders:

Answer 1

I have the solution now. Your dialog code (

<Dialog> </Dialog>

), put them outside the component you use.

example:

<Table>
....
<IconButton> Dialog Show </IconButton>
<Dialog> .............. </Dialog>
....
</Table>

put them like this

<Table>
....
<IconButton> Dialog Show </IconButton>
....
</Table>

<Dialog> .............. </Dialog>

Answer 2

If anybody still stumble upon this, and do not notice the the answer from Mikhail Shabrikov in the comments, because its not posted as an answer:

It looks like many dialogs opened at the same time. – Mikhail Shabrikov Oct 26 '17 at 9:07

I have been back to this page at least the 3. time in the last year, thus adding this answer because I keep missing this (and keep putting my dialogs in iterators) :).