I'm wanting to use the MUI Stepper component as it suits my need perfectly and the rest of the project already uses MUI components. However, I can't get the size of a vertical stepper to increase. What I've tried:

1. Increasing font size
2. Manually setting width and height
3. Custom components (it works but then the line does not fit in well)

Are there any better ways of increasing the MUI stepper size or are there alternative libraries that offer such functionality, or should I look at implementing this myself

I'm wanting to use the MUI Stepper component as it suits my need perfectly and the rest of the project already uses MUI components. However, I can't get the size of a vertical stepper to increase. What I've tried:

1. Increasing font size
2. Manually setting width and height
3. Custom components (it works but then the line does not fit in well)

Are there any better ways of increasing the MUI stepper size or are there alternative libraries that offer such functionality, or should I look at implementing this myself

• reactjs
• typescript
• material-ui

• 1 could you please share your code or (at least a part of it) in the question ? – Shashika Silva Commented Mar 10 at 16:16

1 Answer 1

You can go to the official MUI Stepper demo url https://stackblitz/edit/react-kwmreil4?file=Demo.tsx and play with it.

Below are the places where you can change the size of the vertical stepper. Since you did not share the code its really hard to get your requirement but hope this works well. Below are few things to change in the above demo code to increase the size.

Main Box maxWidth and Padding.

<Box sx={{ maxWidth: 300, padding: 4 }}>

Step Label styles font size :

<StepLabel
  sx={{ '& .MuiStepLabel-label': { fontSize: '1.55rem' } }}
  optional={
    index === steps.length - 1 ? (
      <Typography variant="caption">Last step</Typography>
    ) : null
  }
>