Material-Ui Style Dialog/Modal Backdrop

Material-ui style dialog / modal backdrop

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

How to target backdrop color property of Material UI Dialog using styled components?

You can reference the backdrop via its global class ("MuiBackdrop-root") in the following manner:

const StyledDialog = styled(Dialog)`
  .MuiBackdrop-root {
    background-color: lightgreen;
  }
`;

Relevant Styled Components documentation: https://www.styled-components.com/docs/basics#pseudoelements-pseudoselectors-and-nesting

How to disable MuiBackdrop in Muidialog (Material UI react)

You need to set the hideBackdrop prop to true.

If you look at the bottom of the dialog docs on material UI it has this:

Inheritance.
The props of the Modal component are also available.
You can take advantage of this behavior to target nested components.

hideBackdrop is a prop in the Modal component.

Material UI Modal being dimmed by backdrop

The Modal component simply renders whatever children you pass to it in front of a backdrop component -- it's up to you to style the children. This issue is happening because, in your code, you're attempting to style the Modal root, not its children.

To fix it, wrap your content in another element onto which you can apply your styles and then move your modalStyle styling to that element. For my example, I wrapped them in a Box:

<Modal
  open={open}
  aria-labelledby="modal-modal-title"
  aria-describedby="modal-modal-description"
>
  <Box sx={modalStyle}> {/* Moved here */}
    ...
  </Box>
</Modal>

Which produced:

Working CodeSandbox: https://codesandbox.io/s/sad-christian-de6m9k?file=/demo.tsx

Raise Header's Z-Index Over Material UI Modal Backdrop

As stated in MUIModal documentation the modal component is supposed to behave like that I would try to use menu component instead

Quoting documentation:

If you are creating a modal dialog, you probably want to use the Dialog component rather than directly using Modal. Modal is a lower-level construct that is leveraged by the following components:

• Dialog
• Drawer
• Menu <--
• Popover

Targeting the color of modal backdrop over layer v4 mui?

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'}}} />

How can Material-UI's Dialog allow interaction behind the dialog?

The dialog was meant to block all other interaction so the user can focus on its contents. Anyway, I found one solution, probably not the better but is working here, the code is this:

<Dialog
  hideBackdrop // Disable the backdrop color/image
  disableEnforceFocus // Let the user focus on elements outside the dialog
  style={{ position: 'initial' }} // This was the key point, reset the position of the dialog, so the user can interact with other elements
  disableBackdropClick // Remove the backdrop click (just to be sure)
  ...
>
  ...
</Dialog>

Here a working example

Material UI style How do I remove the outline(s) from the modal backdrop in the image below

I accidentally found a solution to this problem while resolving similar problems on a different project.

A pseudo-selector should be added be added to the content of the classes.modal styling:

...,
modal: {
  ...,
  '&:focus' : {
      outline: 'none !important';
   }
}

The above snippet makes sure that when the modal is in focus, the outline value will be set none whether or not there's an overriding code.

---

Related Topics