Categories
React Answers

How to style React Material UI FormControlLabel font size?

Spread the love

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.

Leave a Reply

Your email address will not be published.

If you like the content of this blog, subscribe to my email list to get exclusive articles not available to anyone else.