material-ui - Material UI 覆盖步骤图标样式

Question

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

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

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

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

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

Answer 1

StepLabel 提供了一个 StepIconProps允许您将自定义 Prop 传递给 StepIcon 的属性成分。 ( docs )

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

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

非线性步进器

您可以嵌套一个 StepLabel内部组件 StepButton当您需要将自定义 Prop 传递给 StepIcon. 时( docs )

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