材质 UI 覆盖步骤图标样式答案

【问题标题】：Material UI Override Step Icon Style材质 UI 覆盖步骤图标样式
【发布时间】：2019-02-22 22:20:12
【问题描述】：

在 3.1.0 版本中使用“@material-ui/core”

全局覆盖步进器图标的颜色非常容易全局

createMuiTheme({
   overrides: {
     MuiStepIcon: {
       root: {
         color: "#F00"
       },
     }
   }
})

但是，尚不清楚如何使用recommended methods 覆盖 StepButton 或 StepLabel 图标的唯一颜色。我看到您可以传入自己的图标元素，但我不想为步骤号和复选标记复制库逻辑。

有没有干净的方法来做到这一点？

【问题讨论】：

只是一个建议...您可以考虑将标题更改为“Material UI Override Step Icon Styles”，因为这适用于所有样式

标签： material-ui

【解决方案1】：

要将这些更改作为全局应用，您可以使用以下内容

createMuiTheme({
overrides: {
    MuiStepIcon: {
        root: {
            color: "#F00",

            "&$active": {
                color: "#C4E90C"
            },

            "&$completed": {
            color: "#C4E90C"
            }
        },
    }
}

})

【讨论】：

【解决方案2】：

我也遇到了同样的问题，所以我在 Mui repo 中提出了issue，收到了这个回复-我们没有在 v4 中使用 Mui-active 和 Mui-completed 类，在 v5 中你应该使用 Mui-活跃和 Mui 完成的课程。

因此，根据他们的说法，这将暂时解决问题- 像这样声明风格 -

stepIconRoot: {
    color: "pink",
    "&.MuiStepIcon-active": {
      color: "red"
    },
    "&.MuiStepIcon-completed": {
      color: "green"
    }
  }

并将其放入<Step> </Step>

<StepLabel
    StepIconProps={{
        classes: {root: classes.stepIconRoot}
        }}>
     {label}
</StepLabel>

https://codesandbox.io/s/material-ui-override-step-icon-color-forked-rcpqw?file=/demo.js:3095-3456

【讨论】：

【解决方案3】：

StepLabel 提供了一个StepIconProps 属性，允许您将自定义道具传递给StepIcon 组件。 (docs)

您可以使用 classes 属性自定义 StepIcon 样式。

<Step key={label}>
  <StepLabel 
    StepIconProps={{ 
      classes: { root: classes.icon } 
    }}
  >
    {label} 
  </StepLabel>
</Step>

非线性步进器

当您需要将自定义道具传递给StepIcon. (docs) 时，您可以在StepButton 中嵌套StepLabel 组件

<Step key={label}>
  <StepButton
    onClick={this.handleStep(index)}
    completed={this.state.completed[index]}
  >
    <StepLabel
      StepIconProps={{ classes: { root: classes.icon } }}
    >
      {label}
    </StepLabel>
  </StepButton>
</Step>

【讨论】：

太棒了！这适用于 StepLabel。 StepIconProps 不能传递给 StepButton；看起来 StepButton 创建了它自己的不能被覆盖的道具对象。你对此有什么见解吗？
你太棒了！谢谢卢克！
有趣的是，您需要使用 !important 才能使颜色属性起作用，感谢您的帮助！
如何根据是否是活动步骤进行条件样式设置？
@Jared 我的解决方案是：const labelClass = index <= currentStep ? classes.active : classes.icon;