如何设置窗体控件标签字体大小的样式

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

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

<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>}
/>

Answer 2

使用材质框字体大小，而不是提供外部样式。

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

Answer 3

FormControlLabel 将typography公开为道具。 经过测试，可在 Mui V5 中工作。 https://mui.com/api/form-control-label/#props

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

Answer 4

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

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

Answer 5

在 theme.ts 中使用覆盖部分

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

Answer 6

这是实现相同目标的另一种选择，但没有使用<Typography />会给您的额外p(引用 MUI v4，因为帖子来自 v5 之前，尽管我相信这个解决方案也可以在那里工作(。

通过参考 FormControlLabel 的文档，您可以看到标签的样式可以使用label规则进行修改(有点像您已经尝试过(，但是另一种方法是使用 withStyles 设置标签样式

const StyledFormControlLabel = withStyles(() => ({
label: {
fontSize: '0.6rem',
}
}))(FormControlLabel);
...
<StyledFormControlLabel
control={<Checkbox value="Hello" color="primary" />}
label="World"
/>

Answer 7

另一种方法可能是直接针对 Mui 类，例如：

.MuiFormControlLabel-label {
font-style: normal;
font-weight: 400;
font-size: 18px;
}