我正在尝试自定义Material UI Steppers上禁用的Step颜色
默认颜色为蓝色(启用)+灰色(禁用)。但我希望将其更改为类似的内容:
但是我似乎无法找到Icon
的{{1}}部分的任何钩子。我已经尝试过将CSS应用于StepLabel
,但是特异性还不够。
我的代码在此处可用:https://codesandbox.io/s/0102v4z1op
TIA!
答案 0 :(得分:2)
<Stepper
activeStep={activeStep}
orientation="vertical"
connector={false}
>
{steps.map((label, index) => {
return (
<Step key={label} className={classes.step} classes={{ completed: classes.completed }}>
<StepButton icon={<DeleteIcon className={classes.xiconRoot}/>} completed={index === 2}>
<StepLabel
classes={{
iconContainer: classes.iconContainer
}}
>
{label}
</StepLabel>
</StepButton>
</Step>
);
})}
</Stepper>
应用于completed
的{{1}}中classes
的符号您可以应用以下内容来覆盖不同的状态。 https://material-ui.com/api/step/#css-api
答案 1 :(得分:0)
我是这样做的:
<StepLabel
classes={{
alternativeLabel: classes.alternativeLabel,
labelContainer: classes.labelContainer
}}
StepIconProps={{
classes: {
root: classes.step,
completed: classes.completed,
active: classes.active,
disabled: classes.disabled
}
}}
>
{this.state.labels[label - 1]}
</StepLabel>
然后在类中,我将它们定义如下:
step: {
"& $completed": {
color: "lightgreen"
},
"& $active": {
color: "pink"
}
"& $disabled: {
color: "red"
}
},
alternativeLabel: {},
active: {}, //needed so that the &$active tag works
completed: {},
disabled: {},
labelContainer: {
"& $alternativeLabel": {
marginTop: 0
}
},