最佳答案
如果有人仍在寻找这个问题,对于 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>
关于reactjs - 如何更改 React Material UI 上的 Stepper 颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40326565/