Set the background color of a Snackbar in Material UI

Question

I am using a Snackbar component from Material UI. 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.

Tunis

Answer 1

You have to set the bodyStyle property:

<Snackbar bodyStyle={{ backgroundColor: 'teal', color: 'coral' }} />

You can find more info about how you customize the snackbars in the documentation

Altostratus

As of 3/1/19 Material UI V3.9.2 this is no longer working. The example below by Emi worked fine for me. – Venerate

Answer 2

With Material UI v1 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 does 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' }

Warranty

My journey to find out how to change the material-ui snackbar component's color is finally over. Thanks, emi! – Obstruction

Answer 3

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>

Indign

Answer 4

The root component of the Snackbar only concerns about positioning itself correctly, if you want to change the appearance of the physical Snackbar, you need to target the SnackbarContent via ContentProps prop. In v5, you can use the sx to do that easily:

<Snackbar
  ContentProps={{
    sx: {
      background: "red"
    }
  }}

Another way is to create a custom variant for your Snackbar:

import { createTheme, ThemeProvider } from "@mui/material/styles";

const theme = createTheme({
  components: {
    MuiSnackbar: {
      variants: [
        {
          props: { variant: "trouble" },
          style: {
            "& .MuiSnackbarContent-root": {
              background: "orange"
            }
          }
        },
        {
          props: { variant: "bigTrouble" },
          style: {
            "& .MuiSnackbarContent-root": {
              background: "red"
            }
          }
        }
      ]
    }
  }
});

<Snackbar variant="bigTrouble"

To use with typescript, you also need to update the prop type of Snackbar:

declare module "@mui/material/Snackbar" {
  interface SnackbarProps {
    variant: "trouble" | "bigTrouble";
  }
}

Wafd

Answer 5

With Material UI v5 the optimal option to customize Snackbar (background, text color or any other styles) is to use sx prop and specific classNames for variants:

<Snackbar
  sx={{
    '& .SnackbarItem-variantSuccess': {
      backgroundColor: colors.primary, //your custom color here
    },
    '& .SnackbarItem-variantError': {
      backgroundColor: colors.alert, //your custom color here
    },
    '& .SnackbarItem-variantWarning': {
      backgroundColor: colors.attention, //your custom color here
    },
    '& .SnackbarItem-variantInfo': {
      backgroundColor: colors.secondary, //your custom color here
    },
  }}
  autoHideDuration={10000}
  //...other props here>
</Snackbar>

The same approach can be applied to notistack library to customize their snackbar.

Avant