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

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

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

Answer 2

使用材质框fontSize而不是提供外部样式。

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

Answer 3

在theme.ts中使用覆盖部分

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

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

3 个答案: