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

Posted 2023-02-22

【中文标题】使用 CSS API 在 Material UI Stepper 中覆盖 CSS 样式

【英文标题】：Overriding CSS styles in Material UI Stepper with CSS API

【发布时间】：2018-12-26 05:09:20

【问题描述】：

我想更改 Material UI StepIcon 中的文本颜色（实际上是一个 SVG 图标），仅用于活动和已完成的步骤。目前，我成功地更改了这些步骤的图标颜色。这就是我的 MuiTheme 现在的样子。

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

整个步进器看起来像：

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

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

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

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

【参考方案1】：

你也需要覆盖文本类

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