Material UI: How to change font size of label in React Material Ui Stepper?

Question

In React material ui, I want to change font size of stepper label. How to acheive that?

  function getSteps() {
    return [
      "OPTION 1",
      "OPTION 2",
      "OPTION 3"
      "OPTION 4"
     
    ];
  }

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

Target the label CSS rule name in the classes prop

import { makeStyles } from "@material-ui/core";

const useStyles = makeStyles({
  customLabelStyle: {
    fontSize: "24px"
  }
});

function App () {
  const classes = useStyles();

  return (
    <StepLabel classes={{label: classes.customLabelStyle}}>
  );
}