Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Set the background color of a Snackbar in MUI

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.

like image 442
jssql Avatar asked Oct 07 '16 11:10

jssql


People also ask

How do I change the background color in snackbar MUI?

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.

What is a snackbar UI?

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.


2 Answers

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' }
like image 108
Emi Avatar answered Sep 18 '22 08:09

Emi


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>
like image 29
Nicolas Gehlert Avatar answered Sep 20 '22 08:09

Nicolas Gehlert