How to change stepper color with hooks (Material UI)

Question

I don't know how to change the color from primary to success of stepper with React hooks. Unfortunately the stepper does not have a built-in color method such as an icon. And I haven't found any other way to do it. Please help and thank you.

My code:

const steps = ['Select master blaster campaign settings','Create an ad group','Create an ad',];
const [color, setColor] = useState('primary')

const successBoxClicked = (e) => {
setColor('success')}

<Stepper activeStep={1} alternativeLabel>
    {steps.map((label) => (
      <Step key={label}>
        <StepLabel>{label}</StepLabel>
      </Step>
    ))}
  </Stepper>

Answer 1

so you can go here and see full customization of the MUI components: https://mui.com/customization/how-to-customize/#5-global-css-override

Answer 2

The Stepper is a very complex component! I had to customize one and I used their guide on customization for that component here https://mui.com/components/steppers/#customized-horizontal-stepper

It will depend on what color exactly you want to target. The easiest way to do this might well be by customizing the theme.

However, I'm going to make some guesses. Let's pretend you wanted to change all of the step icons' colors. You could use the StepIconProps prop. I found it here: https://mui.com/api/step-label/

If you're trying to pull a color from the theme like that, you'll need access to the theme directly. Something like this:

const steps = ['Select master blaster campaign settings','Create an ad group','Create an ad',];

const theme = useTheme() // You can import this 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 certainly other ways to do this. You likely do not need to use style , that was just the easiest way for me to get this out quickly.

Good luck!