[Stepper] Mui-active / Mui-completed classes are not applied to icon container

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

CSS classes .Mui-active and .Mui-completed are not applied to MuiStepLabel iconContainer element. As a result, it’s not possible to change the iconContainer style using custom theme

Expected behavior 🤔

I would expect the .Mui-active and .Mui-completed classes to be applied to each elements of a step instead of just the label, or having any other class for applying style on each element of an active / completed step

Steps to reproduce 🕹

You can replicate the issue using this sandbox

Steps:

1. Check demo.tsx. This is where the stepper is implemented
2. Check index.tsx. This is where the theme is defined. On line 61, you’ll find the style to change step icon style
3. Play around with steps. Only the label is colored
4. Inspect the HTML on the active Icon. You will see that no CSS class is applied to make it active
5. Inspect the HTML on the active label. You will see that the .Mui-active class is applied to make it active

Context 🔦

I’m building a stepper with icons that I want to style using custom theme (using JSS). The stepper looks like this:

My goal is to apply a specific color/background color to the label and the icon of an active step in order to highlight it, just like this:

To do so, I’m relying on the .Mui-active class applied on an active step. So far, this class is only applied to MuiStepLabel-label and not on MuiStepLabel-iconContainer As a result, I’m able to apply the color I want on the label itself using a theme, but I have no way to target an active iconContainer

I experience the exact same behavior with .Mui-completed class

Your environment 🌎

npx @mui/envinfo

  Tested on Chrome, safari, Firefox
  
System:
    OS: macOS 12.4
  Binaries:
    Node: 16.13.2 - ~/.nvm/versions/node/v16.13.2/bin/node
    Yarn: 1.17.3 - /usr/local/bin/yarn
    npm: 8.1.2 - ~/.nvm/versions/node/v16.13.2/bin/npm
  Browsers:
    Chrome: 103.0.5060.53
    Edge: Not Found
    Firefox: 86.0
    Safari: 15.5
  npmPackages:
    @emotion/react: ^11.9.3 => 11.9.3 
    @emotion/styled: ^11.9.3 => 11.9.3 
    @mui/base:  5.0.0-alpha.86 
    @mui/codemod: ^5.8.4 => 5.8.5 
    @mui/envinfo: ^2.0.6 => 2.0.6 
    @mui/icons-material: ^5.8.4 => 5.8.4 
    @mui/lab: ^5.0.0-alpha.86 => 5.0.0-alpha.87 
    @mui/material: ^5.8.4 => 5.8.5 
    @mui/private-theming:  5.8.4 
    @mui/styled-engine:  5.8.0 
    @mui/styles: ^5.8.4 => 5.8.4 
    @mui/system:  5.8.5 
    @mui/types:  7.1.4 
    @mui/utils:  5.8.4 
    @mui/x-date-pickers: ^5.0.0-alpha.7 => 5.0.0-alpha.7 
    @types/react: ^17.0.0 => 17.0.0 
    react: ^17.0.1 => 17.0.1 
    react-dom: ^17.0.1 => 17.0.1 
    typescript: ^4.4.3 => 4.7.4 

[noobyogi0010]

Hey, @siriwatknp I would like to work on this issue if no one else is working on it. Thanks!

[Mark-777-0]

We can both work on this if you’d like? I just fixed my typo, I’m trying some other things once I can get my local set up re-running.