Set background color of Material UI Snackbar

Question

When I set a className to change the background of Snackbar it does not overwrite it. Instead, when the page renders it momentarily displays the background color that I want and then is immediately overwritten.

I looked at some other Stackoverflow answers and I still can't get it working.

// imports....
import Snackbar from '@material-ui/core/Snackbar';
import createClientsStyle from "../../../PageComponents/Landing/CreateClients/style";

function CreateClients(props) {

    //....code

      const { classes } = props;

      return (

              //............code

              <div>

                  <Snackbar

                      className={classes.snackbarStyle}    //<--- here

                      anchorOrigin={{
                        vertical: 'top',
                        horizontal: 'right',
                      }}

                      open={true}
                      autoHideDuration={6000}

                      ContentProps={{
                        'aria-describedby': 'message-id',

                      }}

                      message={<span id="message-id"><div>Hi there! Some message.</div></span>}

                  />
            </div>

    );
}

CreateClients.propTypes = {
  classes: PropTypes.object.isRequired
}

const styles = (theme)=>(createClientsStyle(theme));

export default withStyles(styles)(CreateClients)

Stylesheet

const createClientsStyle = function(theme){
    return  {
     root: {
        flexGrow: 1,
        position:"relative",
        top:"175px"

    },

    logoContainer:{
      position:"relative",
      margin:"0 auto",
      top:"120px"
    },
    container: {
        marginTop:"0px",
        padding: theme.spacing(2),
        textAlign: 'center',
        color: theme.palette.text.secondary,
    },
    clientItem:{
      fontSize:"2em",
      display:"inline-block",
      textAlign:"center",
      width:"100%",
      color:"grey",
       '&:hover': {
       background: "#8a0eff3b",
         transition: "0.4s"
     },
    },
      clientItemSelected: {
      background: "#8a0eff3b",
      fontSize:"2em",
      display:"inline-block",
      textAlign:"center",
      color:"grey",
       '&:hover': {
       background: "#8a0eff3b",
         transition: "0.4s"
     },
    },

    textField:{
      width:"25em",
    },

    listItem:{
      fontSize:'35px',//Insert your required size

    },
    clientButton:{
      backgroundColor:"purple"
    },

    tinyTextClickMe:{
      position:"relative",
      fontSize:"0.5em",
      right:"10%"
    },
    snackbarStyle:{
      backgroundColor:"orange"
    }
  }
}

export default createClientsStyle

Answer 1

The Snackbar component handles open/close state, transitions, and positioning, but Snackbar delegates control of the look of the Snackbar (e.g. background color, typography, padding) to the SnackbarContent component.

If you look at the Customized snackbars demo, you'll see that it changes the background color by specifying a className on the SnackbarContent element rather than on the Snackbar element. You can also achieve the same effect by specifying the className within the ContentProps.

The example below demonstrates both approaches for specifying the class name for the content.

import React from "react";
import ReactDOM from "react-dom";

import Snackbar from "@material-ui/core/Snackbar";
import SnackbarContent from "@material-ui/core/SnackbarContent";
import { withStyles } from "@material-ui/core/styles";
const styles = {
  snackbarStyleViaContentProps: {
    backgroundColor: "orange"
  },
  snackbarStyleViaNestedContent: {
    backgroundColor: "lightgreen",
    color: "black"
  }
};
function App({ classes }) {
  return (
    <div>
      <Snackbar
        anchorOrigin={{
          vertical: "top",
          horizontal: "right"
        }}
        open={true}
        ContentProps={{
          "aria-describedby": "message-id",
          className: classes.snackbarStyleViaContentProps
        }}
        message={
          <span id="message-id">
            <div>Hi there! Some message.</div>
          </span>
        }
      />
      <Snackbar
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "right"
        }}
        open={true}
      >
        <SnackbarContent
          aria-describedby="message-id2"
          className={classes.snackbarStyleViaNestedContent}
          message={
            <span id="message-id2">
              <div>Hi there! Message 2.</div>
            </span>
          }
        />
      </Snackbar>
    </div>
  );
}

const StyledApp = withStyles(styles)(App);

const rootElement = document.getElementById("root");
ReactDOM.render(<StyledApp />, rootElement);