Как переопределить активный цвет и вес шрифта StepLabel

Question

Я попытался переопределить активный цвет и вес шрифта StepLabel, добавив следующее:

const StepLabelStyles = theme => ({
    active: {
    paddingBottom: "19px",
    borderBottom: "#ffffff 3px solid",
    color: "#dddddd"
},

label: {
    paddingBottom: "19px",
    color: "#7b7b7b"
},

iconContainer: {
    paddingBottom: "19px"
}
});
const StepLabelStyled = withStyles(StepLabelStyles)(StepLabel);

, и мой цвет не применяется.

Answer 1

мое решение:

export const MyStepper = withStyles({
    rootClass: {
        color: "blue",                  // default icon color
        "& span": { color: "magenta" }, // default label color
        "& $done": { color: "green" },
        "& $active": { color: "orange", fontWeight: 'bold' },
        "& $fail": { color: "pink" },
    },
    done: {},   // this empty property is necessary
    active: {}, // this empty property is necessary
    fail: {},   // this empty property is necessary
})((props) => {

    const { classes } = props;
    return (
        <Stepper activeStep={ 2 }>
            { [ 'A', 'B', 'C', 'D', 'E' ].map( label => {
                return (
                    <Step key={ label } >
                        <StepLabel
                            error={ label === 'B' }
                            classes={ {         // label colors
                                root: classes.rootClass,
                                completed: classes.done,
                                active: classes.active,
                                error: classes.fail
                            } }

                            StepIconProps={ {    // icon colors
                                classes: {
                                    root: classes.rootClass,
                                    completed: classes.done,
                                    active: classes.active,
                                    error: classes.fail
                                }
                            } }
                        >
                            { label }
                        </StepLabel>
                    </Step>
                );
            })}
        </Stepper>
    );
});

Редактировать: в качестве альтернативы с правилом !important:

{
    rootClass: {
        color: "blue",                  // default icon color
        "& span": { color: "magenta" }, // default label color
    },
    done: { color: "green !important" },
    active: { color: "orange !important", fontWeight: 'bold' },
    fail: { color: "pink !important" }
}