Question

如何更改ui Stepper使用的材质的颜色？默认情况下，材质UI步进器的图标使用“活动”和“完成”步骤的原色。

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'}}也无法在以下任何一个中获得预期的结果这些东西。

如何修改颜色？

可以找到一个小提琴here.

Answer 1

您可以使用StepIconProps上的StepLabel道具来自定义类并更改颜色，例如https://codesandbox.io/s/k1wp19vz6o

MaterialUI步进器使用备用颜色

1 个答案: