DEV Community

Vincent Dizon
Vincent Dizon

Posted on

Personalizing MUI Stepper

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>
Enter fullscreen mode Exit fullscreen mode

from this default view

Default style

to this

New Style

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)