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

Question

I'm looking to change the color of the backdrop of the Dialog component of Material UI using styled-components.

I found this thread on how to do exactly that but I'm not sure how to apply this to styled-components.

I currently haved a StyledDialog as such:

const StyledDialog = styled(Dialog).attrs({

  classes: { paper: 'container' },
  keepMounted: true,
  'aria-labelledby': 'alert-dialog-slide-title',
  'aria-describedby': 'alert-dialog-slide-description'
})`
  .container {
    border-radius: 0;
  }
`;

score 19 · Answer 1 · answered Apr 03 '20 at 14:01

19

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

https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Dialog/Dialog.js

answered Apr 03 '20 at 14:01

07mm8

2,702
2
8
20

this answer should be the selected answer! – alpay Nov 08 '20 at 17:31
Nice one! Simple and easy – gpap Apr 07 '21 at 16:20
The prop is now deprecated, see the solution by @htmn. – Anton Rusak Jun 26 '23 at 09:19

score 8 · Accepted Answer · answered Sep 10 '19 at 22:44

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

score 2 · Answer 3 · answered Mar 13 '23 at 13:34

2

BackdropProps are now deprecated, you can use componentsProps.backdrop instead

<Dialog componentsProps={{ backdrop: { style: { backgroundColor: "transparent" } } }} />

answered Mar 13 '23 at 13:34

htmn

1,505
2
15
26

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

3 Answers3