Change the color of error Icon in material UI stepper

Viewed 111

I'm trying to change the color in a material UI stepper icon whenever it fails. There is a bunch of CSS subclasses to figure out and I have tried every possible combination that I can think of.

The CSS of the element I want to change is displayed like so when I hit inspect element:

.MuiStepIcon-root.Mui-error{
    color: #B9251C;
}

I have tried to access the color to change it to orange but no luck so far. The closest thing I have gotten to edit icons is for completed icons with the code:

step: {
'& $completed': {
  marginTop: '50%',
  fontSize: '20px',
  height: '40px',
  width: '40px',
  color: theme.palette.success.main,
  border: ' 0.05em solid grey',
  borderRadius: '100%',
},

},

however the same thing but with error doenst seem to work.

Any ideas which CSS subclass I should be targetting?

TIA

0 Answers
Related