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

【问题标题】：How to style FormControlLabel font size如何设置 FormControlLabel 字体大小的样式
【发布时间】：2019-03-11 01:52:07
【问题描述】：

如何在 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"
/>

【问题讨论】：

标签： material-ui

【解决方案1】：

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

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

更新：

根据 Saber 的评论，较新的版本应该改用：

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

【讨论】：

最近的版本应该是label={<Typography className={styles.formControlLabel}>World</Typography>}。

【解决方案2】：

使用材质框 fontSize 代替外部样式。

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

【讨论】：

【解决方案3】：

在 theme.ts 中使用 overrides 部分

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

【讨论】：

【解决方案4】：

在 MUI v5 中，您可以这样做：

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

【讨论】：