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" />
To change the font-size of MUI you can provide a fontSize property. The default value is 14px .
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 .
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>} />
Use material box fontSize instead of giving external style.
<FormControlLabel control={<Checkbox name="checkbox" />} label={ <Box component="div" fontSize={15}> Small </Box> } />
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