The Stepper component can be quite intricate to customize. I recently had to modify one and followed a helpful guide provided by the creators. You can check out their customization guide for this component here.
When it comes to changing colors, it really depends on the specific color you're targeting. One efficient method could involve customizing the theme.
For example, if you need to change the colors of all step icons, you might utilize the StepIconProps prop. More information on this can be found here.
If you want to extract a color from the theme itself, direct access to the theme will be necessary. Here's a snippet illustrating how this can be done:
const steps = ['Select master blaster campaign settings','Create an ad group','Create an ad',];
const theme = useTheme() // Import from Material UI
const [color, setColor] = useState(theme.palette.primary.main)
const successBoxClicked = (e) => {
setColor(theme.palette.success.main)
}
<Stepper activeStep={1} alternativeLabel>
{steps.map((label) => (
<Step key={label}>
<StepLabel StepIconProps={{style: {color}}}>{label}</StepLabel>
</Step>
))}
</Stepper>
There are various approaches to achieve this customization. It may not always require using style, but that was the quickest solution for me in this case. Best of luck with your customization!