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;
  }
`;

Answer 1

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