Set the background color of a Snackbar in MUI

Question

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.

Answer 1

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' }

Answer 2

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>