在上面的屏幕截图中，我尝试将步骤颜色更改为：绿色表示正确，黄色表示正在进行，红色表示不正确。
我怎么能这样做呢？
如果有人仍在寻找这个问题，对于 MUI 5，可以通过SX属性 https://mui.com/system/the-sx-prop/ or styled https://mui.com/system/styled/.
查看有哪些类别step https://mui.com/api/step/, stepIcon https://mui.com/api/step-icon/这样您就可以自定义样式。
<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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
