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>
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.
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.
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
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.
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>}
/>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With