如何更改React Material UI上的Stepper颜色？

Question

在上面的屏幕截图中，我尝试将步骤颜色更改为：绿色表示正确，黄色表示正在进行，红色表示不正确。

我怎么能这样做？

Answer 1

老问题，但万一有人在看。

您需要编辑主题并将其包装在getMuiTheme

中

import getMuiTheme from 'material-ui/styles/getMuiTheme'

const muiTheme = getMuiTheme({
    stepper: {
        iconColor: 'green' // or logic to change color
    }
})

<MuiThemeProvider muiTheme={muiTheme}>
    <Stepper>
        ...
    </Stepper>
</MuiThemeProvider>

有关组件的完整列表及其默认颜色调色，请参阅https://github.com/callemall/material-ui/blob/master/src/styles/getMuiTheme.js。

您将看到可以基于每个组件覆盖颜色和/或更改整体主题颜色。

Answer 2

这是我以前使用类重写覆盖它的一种方式-所有其他属性保持不变。

const styles = theme => ({
  labelContainer: {
    "& $alternativeLabel": {
      marginTop: 0
    }
  },
  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
    }
  },
});

class myStepper extends Component {

 render() {
   const { classes } = this.props;
   return(
        <Stepper
          activeStep={activeStep}
          alternativeLabel
          connector={connector}
          classes={{
            root: classes.root
          }}
        >
          {this.state.numberTasks.map(label => {
            return (
              <Step
                key={label}
                classes={{
                  root: classes.step,
                  completed: classes.completed,
                  active: classes.active
                }}
         >
        <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]} //label value here
        </StepLabel>
              </Step>
            );
          })}
        </Stepper>
);
}

export default withStyles(styles)(myStepper);

Answer 3

更新：这是最新版本3的正确方法。您只需通过引用MuiStepIcon，将替代正确添加到您的主题即可：

const theme = createMuiTheme({
  overrides: {
   MuiStepIcon: {
    root: {
      '&$completed': {
        color: 'pink',
      },
      '&$active': {
        color: 'red',
      },
    },
    active: {},
    completed: {},
  },
  palette: {
    ...
  }
})

Answer 4

您需要更改StepLabel组件的道具图标，如下所示：

<StepLabel
 icon={<WarningIcon color={red500} />}
 style={{color: red500}}
>
  Random label
</StepLabel>

Answer 5

希望我可以评论“ @Piotr O”的答案，以保留步骤号，但没有足够的代表。

您需要将icon属性设置为该步骤的index，以保留数字。

<Stepper activeStep={activeStep}> {steps.map((label, index) => { return ( <Step> <StepLabel icon={index+1} /> </Step> ); })} </Stepper>

如果要使用与您提到的图标不同的图标，则需要一些条件逻辑来通过icon道具交换图标，或者另一种可能性是将className道具添加到{{1 }}满足条件后，再使用CSS设置样式。

我在此处包括了两个概念的示例：https://codesandbox.io/s/l5m570jq0l

Answer 6

您可以为StepIconProps属性设置classes属性：

<Step key="someKey">
    <StepLabel StepIconProps={{
        classes: {
            active: classes.icon
        }
    }}>
    Some Text
    </StepLabel>
</Step>

然后，您的样式应使用!important CSS规则覆盖默认的主题颜色：

const styles = theme => ({
  icon: {
    color: "red !important"
  },
});

Answer 7

我们需要将类传递给 StepperLabel props 。例如，如果我们需要更改替代标签类，请尝试以下操作：-

  <StepLabel
  StepIconComponent={stepperIcon} 
  classes={{
         alternativeLabel: classes.alternativeLabel,
          }}
   >
    <span className={cn(classes.label, labelClass)}>
       {'label'}
    </span>
  </StepLabel>