如何在 Material UI Stepper Step 中自定义颜色？答案

【问题标题】：How to customize colors in Material UI Stepper Step?如何在 Material UI Stepper Step 中自定义颜色？
【发布时间】：2018-09-03 16:58:36
【问题描述】：

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

默认颜色为蓝色（启用）+ 灰色（禁用）。但我希望将其更改为这样的：

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

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

TIA！

【问题讨论】：

标签： javascript css reactjs material-ui

【解决方案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>

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

完整示例 sn -p https://codesandbox.io/s/vn8m2rqol3

【讨论】：

这似乎没有任何明显的效果。您可以尝试更新提供的沙盒吗？
好的，请稍等。
您知道一种只更改颜色并保持默认行为的方法吗？？
只需删除图标道具。
这似乎导致步进器恢复默认行为：codesandbox.io/s/nrmo0ym74j :(

【解决方案2】：

我是这样做的：

        <StepLabel
          classes={{
            alternativeLabel: classes.alternativeLabel,
            labelContainer: classes.labelContainer
          }}
          StepIconProps={{
            classes: {
              root: classes.step,
              completed: classes.completed,
              active: classes.active,
              disabled: classes.disabled
            }
          }}
        >
          {this.state.labels[label - 1]}
        </StepLabel>

然后在类中我将它们定义如下：

  step: {
    "&$completed": {
      color: "lightgreen"
    },
    "&$active": {
      color: "pink"
    },
    "&$disabled: {
      color: "red"
    },
  },
  alternativeLabel: {},
  active: {}, //needed so that the &$active tag works
  completed: {},
  disabled: {},
  labelContainer: {
    "&$alternativeLabel": {
      marginTop: 0
    },
  },

【讨论】：