Material-ui style dialog / modal backdrop

Question

How do I go about styling the transparent dark overlay of a material-ui dialog or modal? I'm using material-ui/React/Typescript.

Instead of a transparent dark, I want it to be a transparent white. I'd prefer a JSS solution but an inline style is welcomed.

Answer 1

You can use the BackdropProps property of the modal:

<Modal
          aria-labelledby="simple-modal-title"
          aria-describedby="simple-modal-description"
          open={this.state.open}
          onClose={this.handleClose}
          BackdropProps= {{
              classes: {
                  root: classes.backDrop
              }
          }}
        >

and in your style object:

...
backDrop: {
    background: 'rgba(255,255,255,0.2)',
  },