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

Question

我只想为活动和完成的步骤更改Material UI StepIcon中的文本颜色（实际上是SVG图标）。此刻，我成功地为这些步骤更改了图标的颜色。这就是我的 MuiTheme 现在的样子。

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

整个步进器看起来像：

假设，我想将 tick 的颜色更改为灰色（代表已完成的步骤），并将二号的颜色也更改为灰色（代表当前的活动步骤） ），同时保持无效步骤不变（白色填充）。

更改official documentation之类的文本的fill属性不会产生任何结果，在开发人员检查器中仍显示为白色。

我想在整个应用中应用这种样式。

对此有任何提示或解决方案吗？

Answer 1

您还需要覆盖文本类

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