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 (eg 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);