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