how to increase the size of the stepper in MUI

Question

I want to increase the size of the stepper . also want to add a horizontal line before the initial step content. how it would be possible here I am attaching my code . I have done adding width and height properties. but Its not worked. just stuck with this. how the customization is possible on this stepper component. need help. I am new to react.js and MUI.

      <Stepper activeStep={activeStep} orientation="vertical">
        {steps.map((step, index) => (
          <Step key={step.label}>
            <StepLabel
              optional={
                index === 2 ? (
                  <Typography variant="caption">Last step</Typography>
                ) : null
              }
            >
              {step.label}
            </StepLabel>
            <StepContent>
              
              <Box sx={{ mb: 2 }}>
                <div>
                  <Button
                    variant="contained"
                    onClick={handleNext}
                    sx={{ mt: 1, mr: 1 }}
                  >
                    {index === steps.length - 1 ? 'Finish' : 'Continue'}
                  </Button>
                  <Button
                    disabled={index === 0}
                    onClick={handleBack}
                    sx={{ mt: 1, mr: 1 }}
                  >
                    Back
                  </Button>
                </div>
              </Box>
            </StepContent>
          </Step>
        ))}
      </Stepper>
      {activeStep === steps.length && (
        <Paper square elevation={0} sx={{ p: 3 }}>
          <Typography>All steps completed - you&apos;re finished</Typography>
          <Button onClick={handleReset} sx={{ mt: 1, mr: 1 }}>
            Reset
          </Button>
        </Paper>
      )}
    </Box> ```

Answer 1

Perhaps you could add a custom css to your webpage :

.MuiStepLabel-labelContainer span {
    font-size: xx-large;
}

You can adjust to your desired font size by changing the "font-size" value.

Answer 2

You can use a Theme. Like so:

import { createTheme } from "@mui/material";

const theme = createTheme({typography: {fontSize: 20}});

function App(){
...
return (
    <>
        <ThemeProvider theme={theme}>
            <Stepper ...
            </Stepper>
        </ThemeProvider>
        ...
    </>

}

The lines in between are a bit of. I could not find a way to prevent this.

Answer 3

You can target the minHeight of your muiStepConnector line like this with sx

<Stepper 
    orientation="vertical" 
    activeStep={activeStep} 
    sx={{
          '& .MuiStepConnector-line': {
           minHeight: '40px',
         }
    }}
>