Как настроить цвета в Material UI Stepper Step?

Question

Я пытаюсь настроить отключенный цвет шага для Материал UI Steppers

Цвет по умолчанию: синий (включен) + серый (отключен). Но я хочу изменить это на что-то вроде:

Но я, похоже, не могу найти какой-либо крючок в разделе Icon в StepLabel. Я уже пытался применить CSS к IconContainer, но специфика недостаточна.

Мой код доступен здесь: https://codesandbox.io/s/0102v4z1op

ТИА!

Answer 1

Я сделал это так:

        <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
    }
  },

Answer 2

<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 / апи / шаг / # CSS-апи

Полный пример фрагмента https://codesandbox.io/s/vn8m2rqol3