Targeting the color of modal backdrop over layer v4 mui?-CodePudding

I am trying to change the backdrop color of a mui v4 modal, and I am getting a gray layer on top of backdrop instead sure, it's default behavior but how to remove the shaded div , there is a div if I delete it will give me the clean color but don't know how to target I doubt its paper, any idea how to get rid of this shade or target that color value instated of targeting the backdrop ??

const useStyles = makeStyles((theme) => ({
  backDrop: {
    backgroundColor: 'red',
  },
  
  
  <Modal
      className={classes.backDrop}
      open={context.modal.bool}
      aria-labelledby='modal-modal-title'
      aria-describedby='modal-modal-description'
   >
      {modalsBody}
   </Modal>

CodePudding user response：

So looking at the documentation for the modal we can see that there is a BackdropProps property. This property uses a style object for its value.

<Modal BackdropProps={{style: {backgroundColor: 'white'}}} />