如何设置FormControlLabel字体大小的样式

Question

如何在Material-UI FormControlLabel上设置嵌入式字体大小？以下尝试不起作用。

const styles: any = createStyles({
   formControlLabel: { fontSize: '0.6rem', 
   '& label': { fontSize: '0.6rem' } }
});

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

Answer 1

使用材质框fontSize而不是给出外部样式。

 <FormControlLabel
        control={<Checkbox name="checkbox" />}
        label={
             <Box component="div" fontSize={15}>
                Small
              </Box>
        }
  />

Answer 2

typographyFormControlLabel作为 prop公开。在 Mui V5 中测试并工作。https://mui.com/api/form-control-label/#props

<FormControlLabel
  componentsProps={{ typography: { variant: 'h3' } }}
/>

Answer 3

您可以将标签定义为Typography组件，然后在其中应用样式：

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

Answer 4

在 MUI v5 中你可以这样做：

<FormControlLabel
  label={
    <Typography sx={{ fontSize: 16 }}>
      Label Text
    </Typography>
  }
  control={<Switch />}
/>

Answer 5

使用theme.ts 中的overrides部分

export default createMuiTheme({
  overrides: {
    MuiFormControlLabel: {
      label: {
        fontSize: 14,
      },
    },
});