如何使用挂钩更改步进颜色（材质 UI）答案

【问题标题】：How to change stepper color with hooks (Material UI)如何使用挂钩更改步进颜色（材质 UI）
【发布时间】：2022-01-08 23:14:57
【问题描述】：

我不知道如何使用 React hooks 将 stepper 的颜色从主要更改为成功。不幸的是，步进器没有内置的颜色方法，例如图标。而且我还没有找到任何其他方法来做到这一点。请帮忙，谢谢。

我的代码：

const steps = ['Select master blaster campaign settings','Create an ad group','Create an ad',];
const [color, setColor] = useState('primary')

const successBoxClicked = (e) => {
setColor('success')}

<Stepper activeStep={1} alternativeLabel>
    {steps.map((label) => (
      <Step key={label}>
        <StepLabel>{label}</StepLabel>
      </Step>
    ))}
  </Stepper>

【问题讨论】：

标签： javascript css reactjs material-ui

【解决方案1】：

因此您可以前往此处查看 MUI 组件的完整自定义：https://mui.com/customization/how-to-customize/#5-global-css-override

【讨论】：

【解决方案2】：

步进器是一个非常复杂的组件！我必须定制一个，我在这里使用了他们关于该组件的定制指南https://mui.com/components/steppers/#customized-horizontal-stepper

这将取决于您想要定位的确切颜色。最简单的方法可能是自定义主题。

不过，我会做一些猜测。假设您想更改所有步骤图标的颜色。您可以使用 StepIconProps 道具。我在这里找到它：https://mui.com/api/step-label/

如果您想像这样从主题中提取颜色，则需要直接访问主题。像这样的：

const steps = ['Select master blaster campaign settings','Create an ad group','Create an ad',];

const theme = useTheme() // You can import this from material ui
const [color, setColor] = useState(theme.palette.primary.main)

const successBoxClicked = (e) => {
  setColor(theme.palette.success.main)
}

<Stepper activeStep={1} alternativeLabel>
    {steps.map((label) => (
      <Step key={label}>
        <StepLabel StepIconProps={{style: {color}}}>{label}</StepLabel>
      </Step>
    ))}
  </Stepper>

当然还有其他方法可以做到这一点。您可能不需要使用style，这是我快速解决此问题的最简单方法。

祝你好运！

【讨论】：