'Unable to update stepper active icon color for material ui

I'm using react material ui and having issues changing the color for the following highlight class.

enter image description here

CSS

  stepIcon: {
    '&$active': {
      color: '#1e88e5',
    },
  },

                  <StepLabel
                    classes={{
                      root: classes.stepIcon,
                    }}
                  >
                    {label}

                  </StepLabel>
cssreactjsmaterial-ui


Solution 1:[1]

I am not sure why the classes(especially the active) properties are not working for StepLabel. I tried and went with a different approach. You can override the styles by changing the global theme or you can use styled-components.

Below is a sample example of how I override the styles.

Edit HorizontalLinearAlternativeLabelStepper Material Demo (forked)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions