Question

Using "@material-ui/core" at version 3.1.0

It's pretty easy to override globally a stepper icon's color globally

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

However, it's not clear how you would override the only the color for an icon for either a StepButton or StepLabel using the recommended methods. I see that you can pass in your own icon element, but I don't want to replicate the library logic for the step number and the checkmark.

Is there an clean way to do this?

Answer 1

StepLabel提供了一个StepIconProps属性，该属性允许您将自定义道具传递到StepIcon组件。（docs）

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

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

非线性步进器

当您需要将自定义道具传递到StepLabel（docs）时，可以在StepButton内嵌套StepIcon.组件

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

Answer 2

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

所以根据他们的说法，这将暂时解决问题- 像这样声明样式 -

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

Answer 3

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

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

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

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

})

Material UI Override Step Icon Style

3 个答案: