material UI - 如何更改 FormControlLabel 中标签的字体大小

Question

如何更改 FormControlLabel 内标签的字体大小？我将它与 React for Front End JS 一起使用

<FormGroup row>
     <FormControlLabel
     control={
       <Checkbox onClick={() => onClick('rdOption4')} />
    ????? }
     label="All Date"
/>
 </FormGroup>

Answer 1

FormControlLabel 的label prop接受 a node，因此您可以传入 Typography 元素并以与应用程序中其余文本样式相同的方式对其进行样式设置。

例如。

<FormControlLabel
  label={<Typography variant="body2" color="textSecondary">Foo</Typography>}
/>

Answer 2

使用主题来做到这一点：

import { createMuiTheme } from '@material-ui/core';
export const theme = createMuiTheme({
    overrides: {
        MuiFormControlLabel: {
            label: {
                fontSize: '0.875rem',
            }
        }
    }
});

主题文档

Answer 3

我知道这不是一种美丽的方式，但我可以像这样更改特定标签的字体大小。

<FormControlLabel
  label={<span style={{ fontSize: '2rem' }}>{label}</span>}
/>

Answer 4

了解样式覆盖如何在组件级别工作： https://material-ui.com/customization/components/#overriding-styles-with-global-class-names

你必须像这样覆盖默认的CSS：

1. 首先使用您要自定义的属性创建一个样式对象。确保使用 withStyles 方法导出您的组件
2. 然后在你的组件中，使用classes prop来传递你的新css

代码示例：

const styles = {  
    label: {
        fontSize: '20px',
    },
};
.
.
.

<FormControlLabel
    classes={{
        label: classes.label, // Pass your override css here
    }}
    control={
        <Checkbox
            checked={this.state.checked}
            onChange={this.handleChange}
            name="checked"
   
         color="primary"
        />
    }
    label="This option is correct"
/>
.
.
.
.
export default withStyles(styles)('YOUR_COMPONENT');

Answer 5

sx您还可以使用prop 和来修改各个表单控件标签的样式CSS global classes。

https://mui.com/material-ui/api/form-control-label/

    <FormControlLabel
      sx={{ '& .MuiFormControlLabel-label': { fontSize: '50px' } }}
      control={<Checkbox onClick={() => onClick('rdOption4')} />}
      label="All Date"
    />