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

Question

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

默认颜色为蓝色(启用)+ 灰色(禁用)。但我希望将其更改为类似这样的内容:

但我似乎无法在 StepLabel 的 Icon 部分找到任何 Hook 。我已经尝试将 CSS 应用于 IconContainer，但特异性不够。

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

TIA!

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>

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

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