Overriding MUI Stepper styles in React 2022 - reactjs

Question

I've been struggling with the proper way to override styles for a React MUI Stepper component in 2022. More specifically in the active, and completed states for the label as well as the circle icon.
My Code
import { ThemeProvider } from '#mui/styles';
import { createTheme } from '#mui/system';
const theme = createTheme({
overrides: {
MuiStepIcon: {
root: {
'&$completed': {
color: 'pink',
},
'&$active': {
color: 'red',
},
},
active: {},
completed: {},
},
MuiStepLabel: {
root: {
color: 'red'
}
}
}
})
<ThemeProvider theme={theme}>
<Stepper activeStep={activeStep} className='serviceReferralWizardStepper'>
{steps.map((label) => {
const stepProps = {};
const labelProps = {};
return (
<Step className='stepper-holder' style={{ margin: '0 1.8rem' }} key={label} {...stepProps}>
<StepLabel {...labelProps}><span className='serviceReferralWizardStepper__label'>{label}</span></StepLabel>
</Step>
);
})}
</Stepper>
Currently I see no styles at all applied. Any advice would be apprecieted.

Answer 1

I recommend looking at MUI's documentation example: https://v4.mui.com/components/steppers/#CustomizedSteppers.js
You will need to create custom components to represent the styles you want.
const CustomeConnector = withStyles({
active: {
'& $line': {
borderColor: '#784af4',
},
},
completed: {
'& $line': {
borderColor: '#784af4',
},
},
})(StepConnector);
function CustomeStepIcon(props) {
const classes = // create styles
const { active, completed } = props;
return (
<div
className={clsx(classes.root, {
[classes.active]: active,
})}
>
{completed ? <Check className={classes.completed} /> : <div className={classes.circle} />}
</div>
);
}
<Stepper alternativeLabel activeStep={activeStep} connector={<CustomConnector />}>
{steps.map((label) => (
<Step key={label}>
<StepLabel StepIconComponent={CustomStepIcon}>{label}</StepLabel>
</Step>
))}
</Stepper>
UPDATE
Here is an updated link to the v5 implementation: https://mui.com/components/steppers/#customized-horizontal-stepper