【问题标题】: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={&lt;Typography className={styles.formControlLabel}&gt;World&lt;/Typography&gt;}
    【解决方案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 />}
        />
        

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 2019-03-29
          • 1970-01-01
          • 2011-02-13
          • 1970-01-01
          • 1970-01-01
          • 2012-05-22
          • 2018-01-09
          相关资源
          最近更新 更多