使用 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 中的文本更改填充属性不会给出任何结果，在开发人员检查器中仍然显示填充等于白色。

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

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

Answer 1

您也需要覆盖文本 class

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

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

Overriding CSS styles in Material UI Stepper with CSS API

javascript

css

uistepper

material-design

material-ui