title: color change for the loading bar component of material ui
body: <ul>
  <li>I am trying to learn material ui.</li>
  <li>I am trying to change the css of the loading bar.</li>
  <li>I referred to the documentation and used colorPrimary classes</li>
  <li>but its not changing.</li>
  <li>can you tell me how to fix it so taht in future I will fix it myself</li>
  <li>providing my code snippet below.</li>
  <li>all my code is in ReceipeReviewCardList.js</li>
  </ul>
  
  <p><a href="https://codesandbox.io/s/2zonj08v5r" rel="noreferrer">https://codesandbox.io/s/2zonj08v5r</a></p>
  
  <pre><code>const styles = {
    root: {
      flexGrow: 1
    },
    colorPrimary: {
      color: "green"
    }
  };
  
  
   render() {
      const { classes } = this.props;
      return (
        &lt;div className={classes.root}&gt;
          &lt;LinearProgress
            className={classes.colorPrimary}
            variant="determinate"
            value={this.state.completed}
  </code></pre>