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

to this

Your AI Code Assistant

Automate your code reviews. Catch bugs before your coworkers. Fix security issues in your code. Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Get started free in your IDE