ReactJS: How to change font size and marginTop of stepper label in Material UI?

Question

I want to change the fontsize of stepper label and margin between label and circle. By default marginTop is 16px, i want to reduce it.Is there any way?

Here is the Codesandbox code from material ui: https://codesandbox.io/s/tnpyj?file=/demo.js:0-6101

      <Stepper alternativeLabel nonLinear activeStep={activeStep}>
        {steps.map((label, index) => {
          const stepProps = {};
          const buttonProps = {};
          if (isStepOptional(index)) {
            buttonProps.optional = <Typography variant="caption">Optional</Typography>;
          }
          if (isStepSkipped(index)) {
            stepProps.completed = false;
          }
          return (
            <Step key={label} {...stepProps}>
              <StepButton
                onClick={handleStep(index)}
                completed={isStepComplete(index)}
                {...buttonProps}
              >
                {label}
              </StepButton>
            </Step>
          );
        })}
      </Stepper>
     ```

Answer 1

Use a <StepLabel> component inside your <Step> and then override the styles by looking at the StepLabel CSS documentation :

// Add this
import StepLabel from '@material-ui/core/StepLabel';


const useStyles = makeStyles((theme) => ({
  // your other stuff here
  
  // Add this
  step_label_root: {
    fontSize: '10px',
  }
}));


// within the component

<Step key={label} {...stepProps}>
  <StepButton
    onClick={handleStep(index)}
    completed={isStepComplete(index)}
    {...buttonProps}>
    <StepLabel classes={{ label: classes.step_label_root }}> // HERE add this
      {label}
    </StepLabel>
  </StepButton>
</Step>

Answer 2

You should using withStyles if want to make changes style in material-ui. Example in typescript :

import {
  createStyles,
  Theme,
  withStyles,
  Step
} from "@material-ui/core";

const CustomStep = withStyles((theme: Theme) =>
  createStyles({
    // Input your style here
  })
)(Step);

export default function Dashboard() {
   return (....)
}