Material-ui: [Stepper] Override active step icon text

[jstephens9245]

While building out the vertical stepper I ran into a issue where the active step needed a different font color than the rest.

When looking into the svg I noticed in the .MuiStepIcon-active-# that there was no css className added after the standard className .MuiStepIcon-text-# (that used across all text field in all steps) to differentiate the active text field from the rest

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

Current Behavior 😯

Code 🌈

Its a bit hard to see but above is the text field which shows the issue .MuiStepIcon-text-# that is used across all text fields and no id or class to overwrite the generic css

here's the css snip that I have

const theme = createMuiTheme({
    typography: {
      useNextVariants: true,
    },
    overrides: {
        MuiStepIcon: {
            text: {
                fill: "#D3D3D3",
            },
            root: {
                color: 'white',
                border: "solid",
                borderColor: '#D3D3D3',
                borderRadius: 25,
                borderWidth: 1,

                '&$active': {
                    border: "solid",
                    borderColor: Colors.primaryColor,
                    borderRadius: 25,
                    fill: "white",
                    borderWidth: 1,
                },
                '&$completed': {
                  border: "none"
                }
            },
        },
    },
  });

Hard coded Fix 🔦

to fix this issue I had to add the below snippet in my css files that pointed to the text field who's parent held the MuiStepIcon-active className

.MuiStepIcon-root-53.MuiStepIcon-active-54 .MuiStepIcon-text-54 {
  fill: #034691 !important;
}

This fix requires that anytime I add css to my project I have to modify the above snip with the updated numerical values to point to the correct path. Which doesn't make this a very optimal solution but the only one that seemed to work.

[oliviertassinari]

@jstephens9245 Did you try this strategy?

const theme = createMuiTheme({
  typography: {
    useNextVariants: true,
  },
  overrides: {
    MuiStepIcon: {
      root: {
        '&$active': {
          fill: 'white',
          '& $text': {
            fill: '#034691',
          },
        },
      },
      text: {
        fill: '#D3D3D3',
      },
    },
  },
});

alternatively, you can just use '& text': { instead of '& &text': {

[oliviertassinari]

I have just tried, it works. Happy to help.

[inarsin]

Did anyone try to remove the tick from the icon when step is completed?
I managed to manipulate the text but the tick wont go away.

[oliviertassinari]

https://material-ui.com/components/steppers/#customized-stepper might help.