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

Question

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

我怎样才能做到这一点？

Answer 1

如果有人仍在寻找这个问题，对于 MUI 5，可以通过 sx property或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>