Changing MUI Chip primary or secondary color

Question

I am trying to programmatically change the color of a MUI Chip without much luck. According to the Chip API 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 colorPrimary or colorSecondary css classes and the background color should change.

Here is an example of my code:

<Chip key={label.id} color='primary' classes={{ colorPrimary: label.color }} label={label.label} />

And a picture of the element in browser: https://i.imgur.com/bWYGzzz.png cant inline yet :(

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.

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

<Chip key={label.id} color='primary' classes={{ colorPrimary: { backgroundColor: label.color } }} label={label.label} />

Again to reiterate my goal: I want to apply a hex code color to the chip to change the background color.

Answer 1

you can make it in many ways.

you can add styles directly

<Chip key={label.id} color='primary' style={{backgroundColor:'green'}} label={label.label} />

or you can override the class:

const StyleChip = withStyles({
  root: {
    backgroundColor:'salmon'
  }
})(Chip);

to use everywhere you only will replace Chip to StyleChip

<StyleChip key={label.id} color='primary' label={label.label} />

but if you wanna put the color by programation, the first way is perfect, because

style={{backgroundColor:_thisCanBeVariable_}}