МатериалUI использует степпер альтернативного цвета

Question

Как я могу изменить цвет, который использует материал Stepper? По умолчанию значки пользовательского интерфейса материала используют основной цвет для «активных», а также «завершенных» шагов.

class HorizontalLinearStepper extends React.Component {
  state = {
    activeStep: 1,
    skipped: new Set()
  };

  render() {
    const { classes } = this.props;
    const steps = getSteps();
    const { activeStep } = this.state;

    return (
      <div className={classes.root}>
        <Stepper activeStep={activeStep}>
          {steps.map((label, index) => {
            const props = {};
            const labelProps = {};
            return (
              <Step key={label} {...props}>
                <StepLabel {...labelProps}>{label}</StepLabel>
              </Step>
            );
          })}
        </Stepper>
      </div>
    );
  }
}

Теперь степпер использует основной цвет темы как «цвет иконки». Как я могу изменить это, чтобы использовать дополнительный цвет вместо этого? Добавление color реквизита к любому из Stepper, Step или StepLabel, по-видимому, не работает, а также style={{color: 'red', backgroundColor: 'red'}} не дает ожидаемых результатов ни в одной из этих вещей.

Как мне изменить цвет?

Здесь можно найти скрипку .

Answer 1

Вы можете использовать опору StepIconProps на StepLabel, чтобы настроить классы и изменить цвет, например. https://codesandbox.io/s/k1wp19vz6o