Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

material UI - How can I change the font size of the label in FormControlLabel

How can I change the font size of the label inside the FormControlLabel? I am using it with React for Front End JS

<FormGroup row>
     <FormControlLabel
     control={
       <Checkbox onClick={() => onClick('rdOption4')} />
          }
     label="All Date"
/>
 </FormGroup>
like image 524
Angala Cheng Avatar asked Oct 25 '18 09:10

Angala Cheng


People also ask

How do I change the font size of a form Control label?

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.

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. We call makeStyles with a function that returns the styles for the formControlLabel class to set the font size.

How to change the style of a formcontrollabel?

By referring to the docs for the FormControlLabel you can see the styles for the label can be modified with the label rule (kinda like you've tried to do already), however another approach would be to style the label by using withStyles

How to add a checkbox to the form Control label?

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.


1 Answers

FormControlLabel's label prop accepts a node, so you can pass in a Typography element and style it the same way you style the rest of the text in your app.

eg.

<FormControlLabel
  label={<Typography variant="body2" color="textSecondary">Foo</Typography>}
/>
like image 59
patspam Avatar answered Oct 05 '22 06:10

patspam