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

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

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

Do it using themes:

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

Themes Documentation

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');

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>

Since you're using React with ES5, and I can imagine that you're using the CDN version.

So you can override the default value of the font size of the label in FormControlLabel by using createMuiTheme like this:

var theme = MaterialUI.createMuiTheme({
  overrides: {
    MuiFormControlLabel: {
      label: {
        fontSize: 'new value here'
      }
    }
  }
});

ReactDOM.render(
  <ThemeProvider theme={theme}>
    <App />
  </ThemeProvider>,
  document.querySelector('#root'),
);

Here is an example https://github.com/mui-org/material-ui/tree/master/examples/cdn

Please note according to the official doc:

You can start using Material-UI with minimal Front-end infrastructure, which is great for prototyping.

Two Universal Module Definition (UMD) files are provided:

one for development: https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js one for production: https://unpkg.com/@material-ui/core@latest/umd/material-ui.production.min.js You can follow this CDN example to quickly get started.

⚠️ Using this approach in production is discouraged though - the client has to download the entire library, regardless of which components are actually used, affecting performance and bandwidth utilization.

⚠️ The UMD links are using the latest tag to point to the latest version of the library. This pointer is unstable, it shifts as we release new versions. You should consider pointing to a specific version, such as v4.4.0.

I found this here: https://kevinyckim33.medium.com/withstyles-material-ui-override-d8f772341390

Wrap FormControlLabel with StyledFormControlLabel and use that in your code instead like so:

import FormControlLabel from '@material-ui/core/FormControlLabel'
import { withStyles } from '@material-ui/core/styles'
export const StyledFormControlLabel = withStyles({
  root: {
    color: 'red',
  },
  label: {
    textTransform: 'capitalize',
  },
})(FormControlLabel)

const useStyle = makeStyles(style => ({
    fontSize: {
        "& span:last-child": {
            fontSize:10
        }
    }
}));

<FormControlLabel
    className={classes.fontSize}
    control={<Checkbox style={{ color: blueColor['300'] }} />}
    label="Econom"
/>

You can set the style through componentsProps on FormControlLabel, e.g.:

  <FormControlLabel
    componentsProps={{ typography: { variant: 'subtitle2' } }}
    control={<Switch />}
    label='my toggle'
  />