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

Question

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>

Solution 1

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>}
/>

Solution 2

I know that this is not beautiful way but I can change font size for specific label like this.

<FormControlLabel
  label={<span style={{ fontSize: '2rem' }}>{label}</span>}
/>

Solution 3

Do it using themes:

import { createMuiTheme } from '@material-ui/core';
export const theme = createMuiTheme({
    overrides: {
        MuiFormControlLabel: {
            label: {
                fontSize: '0.875rem',
            }
        }
    }
});

Themes Documentation

Solution 4

See how style overrides work at the component level: https://material-ui.com/customization/components/#overriding-styles-with-global-class-names

You have to override the default css like this:

1. First make a style object with the property you want to customize. Make sure to use withStyles method to export your component
2. Then in your component, use the classes prop to pass your new css

Code example:

const styles = {  
    label: {
        fontSize: '20px',
    },
};
.
.
.

<FormControlLabel
    classes={{
        label: classes.label, // Pass your override css here
    }}
    control={
        <Checkbox
            checked={this.state.checked}
            onChange={this.handleChange}
            name="checked"
   
         color="primary"
        />
    }
    label="This option is correct"
/>
.
.
.
.
export default withStyles(styles)('YOUR_COMPONENT');

Solution 5

According to the official Material-UI documentation, you can override the the component styles. So in your case:

1. Create your custom styles e.g.

   const useStyles = makeStyles(() => ({
       label: {
            fontSize: '0.8em'
        }
    }));
   

2. Apply it to the FormControlLabel

    <FormControlLabel 
       classes={{ label: classes.label }}
       [...]
    </FormControlLabel>

View more solutions

Comments

[Angala Cheng]

im using React with ES5 , it didnt support export :/

[MMH]

This option gives a better control over styling the labels locally as opposed to overriding at the root level.

[Deepansh Parmani]

does this work <FormLabel> too ?

[AndyN]

saved my time!!