Personalizing MUI Stepper

#react #materialui #styling

Interested on how to customize your MUI Stepper?

<Stepper activeStep={activeStep}>
  <Step
    sx={{
      '& .MuiStepLabel-root .Mui-completed': {
        color: 'green', // circle color (COMPLETED)
      },
      '& .MuiStepLabel-label.Mui-completed': {
        color: 'black !important', // label color (COMPLETED)
      },
    }}
  >
    <StepLabel>Personal Details</StepLabel>
  </Step>
  <Step
    sx={{
      '& .MuiStepLabel-root .Mui-completed': {
        color: 'green', // circle color (COMPLETED)
      },
      '& .MuiStepLabel-label.Mui-completed': {
        color: 'black !important', // label color (COMPLETED)
      },
    }}
  >
    <StepLabel>Personal Details</StepLabel>
  </Step>
</Stepper>

from this default view