Menu
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;
}
`;
772
To set the background color of the Material UI drawer, we call the makeStyles function to create the styles. Then we can apply the styles with the useStyles hook returned by makeStyles . We call makeStyles with an object that has the properties set to objects with the styles.
Use the styled() method to style your Material UI components. The styled() method from styled-components takes as input a React component and outputs another React component with a different style. It is useful as it enables you to style your component using the exact same syntax as in your typical CSS stylesheet.
The backdrop component is used to provide emphasis on a particular element or parts of it. The backdrop signals to the user of a state change within the application and can be used for creating loaders, dialogs, and more. In its simplest form, the backdrop component will add a dimmed layer over your application.
<Dialog BackdropProps={{style: {backgroundColor: 'white'}}}/>
https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Dialog/Dialog.js
185
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
35
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
