使用 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,
        },
      },
    }
  },
});

整个步进器看起来像：

Assumings，我想改变的颜色蜱到灰（其表示完成的步骤）和色2号到灰以及（其表示当前激活步骤），同时保持非激活步骤没有变化（白色填充）。

像官方文档一样更改文本的填充属性不会产生任何结果，在开发人员检查器中仍然显示填充等于白色。

我想为整个应用程序应用该样式。

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

Answer 1

您也需要覆盖文本类

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