I am using a Snackbar
component from MUI. At the moment the Snackbar
appears in black. Do you know how I can change the color? Setting background-color only changes the color of the whole div in which the Snackbar
is presented. It does not change the color of the Snackbar
.
Answers 1 : of Set the background color of a Snackbar in MUI With material-ui 1.0 (or higher) you should override the root CSS class from the SnackbarContent component with the prop ContentProps.
Snackbars provide brief feedback about an operation through a message at the bottom of the screen. Snackbars contain a single line of text directly related to the operation performed. They may contain a text action, but no icons. Toasts (Android only) are primarily used for system messaging.
With material-ui 1.0 (or higher) you should override the root CSS class from the SnackbarContent component with the prop ContentProps.
Here is an example:
const styles = {
root: {
background: 'red'
}
};
class MySnackbar extends Component {
render() {
const { classes } = this.props;
return (
<Snackbar
ContentProps={{
classes: {
root: classes.root
}
}}
message={<span>Some message</span>}
/>
);
}
}
export default withStyles(styles)(MySnackbar);
If someone do not want to pass style as props, we can also write a class in a css file and assign it to the ContentProps, like this:
ContentProps={{
classes: {
root: 'errorClass'
}
}}
and in index.css file:
.errorClass { color: 'red' }
With the current material-ui version (4.3.0) there is a even simpler approach than the ContentProps way. Instead of the message
attribute you can use a SnackbarContent
as child and simply call style={}
on it
<Snackbar
open={this.state.showSnackbar}
autoHideDuration={3000}
onClose={() => {this.setState({showSnackbar: false})}}
>
<SnackbarContent style={{
backgroundColor:'teal',
}}
message={<span id="client-snackbar">Hello World</span>}
/>
</Snackbar>
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