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

【问题标题】：How do you change the Stepper color on React Material UI?如何更改 React Material UI 上的 Stepper 颜色？
【发布时间】：2017-03-12 14:44:49
【问题描述】：

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

我该怎么做？

【问题讨论】：

Material UI 在其文档中添加了自定义Steppers。参考here

标签： reactjs material-ui

【解决方案1】：

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

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

【讨论】：

你是救世主！

【解决方案2】：

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

您需要编辑主题并将其包装在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 了解完整的组件列表及其默认颜色方案。

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

【讨论】：

工作。谢谢。

【解决方案3】：

这是我过去使用类覆盖来覆盖它的一种方式 - 所有其他属性保持不变。

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);

【讨论】：

【解决方案4】：

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

JavaScript 样式的一部分

...
icon:{
  fill:"green",
},
text:{
  fill:"white",
},
...

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

那么您的样式应该使用!important CSS 规则覆盖默认主题颜色：

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

【讨论】：

谢谢，第一个例子正是我需要的。
如何将步骤保持为蓝色球体而不是编号？ {steps.map((step) => ( {step.label} ))} 我无法删除编号并只保留蓝点/球体作为步骤。

【解决方案5】：

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

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

【讨论】：

这可以，但是当我更改图标时，我丢失了里面的数字。我如何将它们添加回来？

【解决方案6】：

希望我可以通过“@Piotr O”评论答案，关于保留步数但还没有足够的代表。

您需要将 icon 属性设置为 Step 的 index 以保留数字。

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

如果您要使用您提到的不同图标，则需要一些条件逻辑来通过 icon 道具交换图标，或者另一种可能性是在条件为时将 className 道具添加到 <StepLabel />遇到，然后用 CSS 设置样式。

我在这里包含了一个包含这两个概念的示例：https://codesandbox.io/s/l5m570jq0l

【讨论】：

【解决方案7】：

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


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

【讨论】：