使用 CSS API 在 Material UI Stepper 中覆盖 CSS 样式

Question

I would like to change text color (which is actually a SVG Icon) in Material UI StepIcon only for active and completed steps. At the moment, I successfully changed color of an icon for those steps. That's how my MuiTheme looks like now.

export default createMuiTheme({
  overrides: {
    MuiStepIcon: {
      root: {
        '&$active': {
          color: styles.myGreen,
        },
        '&$completed': {
          color: styles.myGreen,
        },
      },
    }
  },
});

And whole stepper looks like:

Assumings, I would like to change color of tick to gray (which represents completed steps) and color of number two to gray as well (which represents currently active step), while keeping inactive step not changed (white fill).

Changing fill property for text like in official documentation does not give any results, in developer inspector still shows fill equal white.

I want to apply that styling for whole app.

Any tips or solution for this one?

Answer 1

you need to override the text class too

export default createMuiTheme({
  overrides: {
    MuiStepIcon: {
      root: {
        '&$active': {
          color: styles.myGreen,
        },
        '&$completed': {
          color: styles.myGreen,
        },
      },
      text: {
        fill: <YOUR_DESIRED_COLOR>
      },
     },
    }
  },
});