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)',
  },

Answer 2

The API for this has changed a bit in the last couple of years. BackdropProps is now referenced by slotProps.backdrop. Meaning the component now takes a slotProps prop, that receives an object, one of the properties being backdrop all lowercase. backdrop takes an object that can include many things, including a style prop that you use like usual.

    <Modal
      slotProps={{ backdrop: { style: { backgroundColor: 'rgba(255,255,255,0.2)' } } }}
    >
    </Modal>