如何使用挂钩更改步进器颜色(材质UI)

Question

我不知道如何将带有React挂钩的步进器的颜色从原色更改为成功色。不幸的是，步进器没有内置的颜色方法，例如图标。我还没有找到其他方法。请帮忙，谢谢你。

我的代码：

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>

Answer 1

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

这将取决于你想要的目标颜色。最简单的方法可能是自定义主题。

不过，我要做一些猜测。让我们假设您想更改所有步骤图标的颜色。你可以使用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，这对我来说是最简单的快速解决方法。

祝你好运！

Answer 2

因此您可以在此处查看MUI组件的完全自定义：https://mui.com/customization/how-to-customize/#5-全局css覆盖