javascript - 如何在 Material UI Stepper Step 中自定义颜色？

Question

我正在尝试在Material UI Steppers上自定义禁用的 Step 颜色

默认颜色为蓝色（启用）+ 灰色（禁用）。但我希望将其更改为如下内容：

但我似乎无法Icon在StepLabel. 我已经尝试将 CSS 应用到 . IconContainer，但特异性还不够。

我的代码在这里可用：https ://codesandbox.io/s/0102v4z1op

蒂亚！

标签： javascriptcssreactjsmaterial-ui

Answer 1

<Stepper
      activeStep={activeStep}
      orientation="vertical"
      connector={false}
    >
      {steps.map((label, index) => {
        return (
          <Step key={label} className={classes.step} classes={{ completed: classes.completed }}>
            <StepButton icon={<DeleteIcon className={classes.xiconRoot}/>} completed={index === 2}>
              <StepLabel
                classes={{
                  iconContainer: classes.iconContainer
                }}
              >
                {label}
              </StepLabel>
            </StepButton>
          </Step>
        );
      })}
</Stepper>

类似于completed应用于您可以classes应用Step以下内容来覆盖不同的状态。https://material-ui.com/api/step/#css-api

完整的示例片段https://codesandbox.io/s/vn8m2rqol3