How do you change the Stepper color on React Material UI?

material-ui, reactjs

Solution

In case anyone is still looking for this question, for MUI 5 it is through the sx property or styled.

Checkout what are the classes of step, stepIcon so you can customize the styles.

<Box sx={{ width: '100%' }}>
  <Stepper activeStep={currentStep} alternativeLabel>
    {Object.keys(steps).map((stepNumber) => (
      <Step
        key={stepNumber}
        sx={{
          '& .MuiStepLabel-root .Mui-completed': {
            color: 'secondary.dark', // circle color (COMPLETED)
          },
          '& .MuiStepLabel-label.Mui-completed.MuiStepLabel-alternativeLabel':
            {
              color: 'grey.500', // Just text label (COMPLETED)
            },
          '& .MuiStepLabel-root .Mui-active': {
            color: 'secondary.main', // circle color (ACTIVE)
          },
          '& .MuiStepLabel-label.Mui-active.MuiStepLabel-alternativeLabel':
            {
              color: 'common.white', // Just text label (ACTIVE)
            },
          '& .MuiStepLabel-root .Mui-active .MuiStepIcon-text': {
            fill: 'black', // circle's number (ACTIVE)
          },
        }}>
        <StepLabel>{steps[stepNumber].label}</StepLabel>
      </Step>
    ))}
  </Stepper>
</Box>

Problem

In the screenshot above, I am trying to change the step color to either: green for correct, yellow for in-progress and red for incorrect. How could I do this?

Original source