Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to style FormControlLabel font size

Tags:

material-ui

How do you set the in-line font size on a Material-UI FormControlLabel? The below attempt does not work.

const styles: any = createStyles({    formControlLabel: { fontSize: '0.6rem',     '& label': { fontSize: '0.6rem' } } });  <FormControlLabel style={styles.formControlLabel}   control={<Checkbox value="Hello" color="primary" />}            label="World" /> 
like image 855
Lambert Avatar asked Oct 05 '18 14:10

Lambert


People also ask

How do you change the font size on a material UI label?

To change the font-size of MUI you can provide a fontSize property. The default value is 14px .

How do you make labels bold in material UI?

Material-UI Typography Bold Text If you need the text to be bold, simply add fontWeight: 'bold' to the sx prop. This is the same as font-weight: 700 .


2 Answers

You could define the label as a Typography component and apply the style there:

<FormControlLabel      control={<Checkbox value="Hello" color="primary" />}     label={<Typography style={styles.formControlLabel}>World</Typography>} /> 

UPDATE:

As per Saber's comment, newer versions should instead use:

<FormControlLabel      control={<Checkbox value="Hello" color="primary" />}     label={<Typography className={styles.formControlLabel}>World</Typography>} /> 
like image 150
Tomas Di Domenico Avatar answered Sep 23 '22 20:09

Tomas Di Domenico


Use material box fontSize instead of giving external style.

 <FormControlLabel         control={<Checkbox name="checkbox" />}         label={              <Box component="div" fontSize={15}>                 Small               </Box>         }   /> 
like image 41
Sourav Singh Avatar answered Sep 24 '22 20:09

Sourav Singh