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

Question

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

我怎么能这样做？

Answer 1

如果有人仍在寻找这个问题，对于 MUI 5，它是通过sx 属性或styled。

查看step、stepIcon的类是什么，以便您可以自定义样式。

<Box sx={{ width: '100%' }}>
  <Stepper activeStep={currentStep} alternativeLabel>
    {Object.keys(steps).map((stepNumber) => (
      <Step
        key={stepNumber}
        sx={{
          '& .MuiStepLabel-root .Mui-completed': {
            color: 'secondary.dark', // circle color (COMPLETED)
          },
          '& .MuiStepLabel-label.Mui-completed.MuiStepLabel-alternativeLabel':
            {
              color: 'grey.500', // Just text label (COMPLETED)
            },
          '& .MuiStepLabel-root .Mui-active': {
            color: 'secondary.main', // circle color (ACTIVE)
          },
          '& .MuiStepLabel-label.Mui-active.MuiStepLabel-alternativeLabel':
            {
              color: 'common.white', // Just text label (ACTIVE)
            },
          '& .MuiStepLabel-root .Mui-active .MuiStepIcon-text': {
            fill: 'black', // circle's number (ACTIVE)
          },
        }}>
        <StepLabel>{steps[stepNumber].label}</StepLabel>
      </Step>
    ))}
  </Stepper>
</Box>

Answer 2

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

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

Answer 3

老问题,但万一有人在看.

您需要编辑主题并将其包装 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 4

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

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 5

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

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