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"
     
    ];
  }

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"
     
    ];
  }

• javascript
• reactjs
• react-native
• material-ui

Share Improve this question Follow asked Oct 5, 2020 at 7:25 theWanderertheWanderer 65622 gold badges1313 silver badges3434 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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.

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}}>
  );
}