[StepIcon] Cannot override active color

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

Hey,

I’m currently trying to override the StepIcon active color at theme level, following the examples I’ve found in the documentation, but it’s not working for me. Overriding the styles for the text in the StepIcon is working though.

Thank you for you help.

Expected behavior 🤔

I’m expecting the color of the active step icon to change to red.

Steps to reproduce 🕹

Steps:

1. Go to https://codesandbox.io/s/stepiconcolor-dixvx
2. There, I’ve tried to change the color of the icon in 2 ways, but none of them works.

Context 🔦

I’m trying to migrate a theme from v4 to v5.

Your environment 🌎

`npx @mui/envinfo`

 System:
    OS: Windows 10 10.0.19042
  Binaries:
    Node: 16.13.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD  
    npm: 6.14.10 - C:\Program Files\nodejs\npm.CMD  
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.19041.1266.0), Chromium (95.0.1020.53)
  npmPackages:
    @emotion/react: ^11.6.0 => 11.6.0
    @emotion/styled: ^11.6.0 => 11.6.0
    @mui/base:  5.0.0-alpha.55
    @mui/icons-material: ^5.1.1 => 5.1.1
    @mui/lab: ^5.0.0-alpha.55 => 5.0.0-alpha.55
    @mui/material: ^5.1.1 => 5.1.1
    @mui/private-theming:  5.1.1
    @mui/styled-engine:  5.1.1
    @mui/styles: ^5.1.1 => 5.1.1
    @mui/system:  5.1.1
    @mui/types:  7.1.0
    @mui/utils:  5.1.1
    @types/react:  17.0.35
    react: ^17.0.2 => 17.0.2
    react-dom: ^17.0.2 => 17.0.2

[michaldudak]

Thanks for pointing this out, @abrezuica! I’ve just prepared a PR with a fix.

[abrezuica]

There shouldn’t be a space between & and class name … On Tue, 23 Nov, 2021, 17:19 Adela, @.***> wrote: Change “& .MuiStepIcon-active” to “&.Mui-active” in L11 of your sandbox it still doesn’t work — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#29825 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AN4VUQF23EYP2ME7NA5R44LUNO5I5ANCNFSM5IQIRNLQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

Omg, thanks a lot. I’ve tried it without the space but not in this combination it seems. However, I wouldn’t close this issue for the moment, since I think the documentation for StepIcon global classnames should be updated?