Sometimes, we want to style React Material UI FormControlLabel font size.

In this article, we’ll look at how to style React Material UI FormControlLabel font size.

How to style React Material UI FormControlLabel font size?

To style React Material UI FormControlLabel font size, we can set the label prop of the FormControlLabel component to render a Typography component.

For instance, we write:

import * as React from "react";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import Typography from "@material-ui/core/Typography";
import Checkbox from "@material-ui/core/Checkbox";
import { makeStyles } from "@material-ui/styles";

const useStyles = makeStyles(() => ({
  formControlLabel: { fontSize: "30px", "& label": { fontSize: "0.6rem" } }
}));

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

  return (
    <div>
      <FormControlLabel
        control={<Checkbox value="Hello" color="primary" />}
        label={
          <Typography className={classes.formControlLabel}>World</Typography>
        }
      />
    </div>
  );
}

We call makeStyles with a function that returns the styles for the formControlLabel class to set the font size.

Then we call the useStyles hook in App to apply the styles by setting the className prop of the Typography component to classes.formControlLabel.

Next, we set the control prop to a Checkbox component to add a checkbox.

The label prop is set to the Typography component to let us render the text with our styles.

Conclusion

To style React Material UI FormControlLabel font size, we can set the label prop of the FormControlLabel component to render a Typography component.