title: Changing MUI Chip primary or secondary color
body: <p>I am trying to programmatically change the color of a MUI <code>Chip</code> without much luck. According to the <a href="https://mui.com/api/chip" rel="nofollow noreferrer"><code>Chip</code> API</a> you have to set the color via the color prop with one of three values from an enum; default, primary, and secondary. You should then be able to override the the <code>colorPrimary</code> or <code>colorSecondary</code> css classes and the background color should change.</p>
  <p>Here is an example of my code:</p>
  <pre class="lang-js prettyprint-override"><code>&lt;Chip key={label.id} color='primary' classes={{ colorPrimary: label.color }} label={label.label} /&gt;
  </code></pre>
  <p>And a picture of the element in browser:
  <a href="https://i.imgur.com/bWYGzzz.png" rel="nofollow noreferrer">https://i.imgur.com/bWYGzzz.png</a> cant inline yet :(</p>
  <p>If you look at the selected element, you will see the correct color I am trying to apply, #ff0000, so it is getting the color and putting it somewhere.</p>
  <p>I've tried this variation, adding the colorBackground property, but I get an error saying the colorPrimary class expects a string instead of an object</p>
  <pre class="lang-js prettyprint-override"><code>&lt;Chip key={label.id} color='primary' classes={{ colorPrimary: { backgroundColor: label.color } }} label={label.label} /&gt;
  </code></pre>
  <p>Again to reiterate my goal: I want to apply a hex code color to the chip to change the background color.</p>