[Stepper] Cannot customize StepIcon style via StepIconProps (prop of StepLabel API)

[imsuvesh]

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

I think Issue #26830 also has the somewhat same problem but I think I have found the issue which is causing this problem.

Current Behavior 😯

StepIcon's active and completed property does not have the style applied when passing the styles with StepIconProps, but when styles are passed to root property it works only on root property.

<Step key={label} {...props}>
        <StepLabel
                  StepIconProps={{
                    classes: {
                      root: classes.stepIconRoot,
                      active: classes.stepIconActive,
                      completed: classes.stepIconCompleted
                    }
                  }}> {label}
        </StepLabel>
</Step>

Here I am passing styles to root, active and completed css rules but styles are applied only on root css, active and completed styles didn't work.

Expected Behavior 🤔

Styles should work on all three css rules, not just only on root.

Steps to Reproduce 🕹

https://codesandbox.io/s/material-ui-override-step-icon-color-forked-0f81n?file=/demo.js

Here for active rule instead of .MuiStepIcon-active class .MuiStepIcon-root.MuiStepIcon-active is applied.

If I remove .MuiStepIcon-root from .MuiStepIcon-root.MuiStepIcon-active then active rule gets applied and we see active button color=red.

Same goes for completed rule - It would display blue color but if we remove .MuiStepIcon-root from .MuiStepIcon-root.MuiStepIcon-completed then styles get applied and it would show the new style color=green

This is a more than 2yr old problem I found the solution here - https://stackoverflow.com/questions/52394040/material-ui-override-step-icon-style/52394315
Till this issue is fixed I am going to mark color property !important in both active and completed css classes.

  stepIconRoot: {
    color: "pink"
  },
  stepIconActive: {
    color: "red !important"
  },
  stepIconCompleted: {
    color: "green !important"
  }

[mnajdova]

You need to increase the specificity for the pseudo states. See https://next.material-ui.com/customization/how-to-customize/#pseudo-classes What may be confusing here is that we are not using the Mui-active and Mui-completed class in v4. You can fix it with - https://codesandbox.io/s/material-ui-override-step-icon-color-forked-rcpqw

---

In v5 you should use the Mui-active and Mui-completed classes.

[support]

👋 Thanks for using Material-UI!

We use GitHub issues exclusively as a bug and feature requests tracker, however,
this issue appears to be a support request.

For support, please check out https://material-ui.com/getting-started/support/. Thanks!

If you have a question on StackOverflow, you are welcome to link to it here, it might help others.
If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened.

[imsuvesh]

@mnajdova Can you tell if we put useStyles in same file it works well when we put useStyles in a different file, no styles are getting applied? Why's that?

Also if we edit anything in useStyles.js file then it starts working but as soon as I refresh page it stops working.

see csb - https://codesandbox.io/s/material-ui-override-step-icon-color-forked-ux4ss?file=/demo.js

[mnajdova]

Is this happening on codesandbox only?

[imsuvesh]

Is this happening on codesandbox only?

It was not working on my laptop too.
But I found it SOF- https://stackoverflow.com/questions/56929702/material-ui-v4-makestyles-exported-from-a-single-file-doesnt-retain-the-styles
It was a silly mistake, I was importing useStyles.js before importing Mui components.
Sorry to disturb you. My apologies 😓