How to override active color and font-weight of StepLabel

Question

I tried try to override active color and font-weight of StepLabel by adding the following:

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);

and my color is not applied.

Answer 1

my solution:

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>
    );
});

Edit: alternatively with the !important rule:

{
    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" }
}

Answer 2

In my case with theme this worked with !important and StepIconProps

    const styles = theme => ({
        stepIcon: {color: theme.palette.primary.main,},
        done: { color: theme.palette.secondary.dark+" !important" },
        active: { color: theme.palette.secondary.light+" !important"},
        fail: { color: "red !important" },
    )}

    <StepLabel {...labelProps} 
        StepIconProps={{
            classes: { 
               root: classes.stepIcon,
               completed: classes.done,
               active: classes.active,
               error: classes.fail
            }
        }}
    >