材质UI覆盖步骤图标样式

Question

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

这是很容易在全球范围内覆盖步进图标的颜色全球

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

但是，目前尚不清楚如何使用推荐的方法来为StepButton或StepLabel覆盖图标的唯一颜色。我看到您可以传递自己的icon元素，但是我不想复制步骤号和选中标记的库逻辑。

有没有一种干净的方法可以做到这一点？

Answer 1

StepLabel提供了StepIconProps允许您将自定义道具传递给StepIcon组件的属性。（docs）

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

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

非线性步进

当需要将自定义道具传递给（docs）时，可以在其中嵌套StepLabel组件StepButtonStepIcon.

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