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:

Weird. You need to inspect the css and see from where the effects are coming. Some other css might be messing things up. — Panther
if you can add any plunker or jsfiddle, it will help us in finding the issue.. — Rajeev Ranjan

darkscripter darkscripter · Accepted Answer · 2020-03-15T16:03:47

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>

Dialog box in Material UI opens with a weird gray background

2 Answers