title: Set background color of Material UI Snackbar
body: <p>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.</p>
  
  <p>I looked at some other Stackoverflow answers and I still can't get it working. </p>
  
  <pre><code>// imports....
  import Snackbar from '@material-ui/core/Snackbar';
  import createClientsStyle from "../../../PageComponents/Landing/CreateClients/style";
  
  function CreateClients(props) {
  
      //....code
  
        const { classes } = props;
  
        return (
  
                //............code
  
                &lt;div&gt;
  
                    &lt;Snackbar
  
                        className={classes.snackbarStyle}    //&lt;--- here
  
                        anchorOrigin={{
                          vertical: 'top',
                          horizontal: 'right',
                        }}
  
                        open={true}
                        autoHideDuration={6000}
  
                        ContentProps={{
                          'aria-describedby': 'message-id',
  
                        }}
  
                        message={&lt;span id="message-id"&gt;&lt;div&gt;Hi there! Some message.&lt;/div&gt;&lt;/span&gt;}
  
                    /&gt;
              &lt;/div&gt;
  
      );
  }
  
  CreateClients.propTypes = {
    classes: PropTypes.object.isRequired
  }
  
  const styles = (theme)=&gt;(createClientsStyle(theme));
  
  export default withStyles(styles)(CreateClients)
  </code></pre>
  
  <p><strong>Stylesheet</strong></p>
  
  <pre><code>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",
         '&amp;:hover': {
         background: "#8a0eff3b",
           transition: "0.4s"
       },
      },
        clientItemSelected: {
        background: "#8a0eff3b",
        fontSize:"2em",
        display:"inline-block",
        textAlign:"center",
        color:"grey",
         '&amp;: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
  </code></pre>