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

Posted 2023-02-22

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

【英文标题】：material UI - How can I change the font size of the label in FormControlLabel

【发布时间】：2019-03-29 21:12:57

【问题描述】：

如何更改 FormControlLabel 中标签的字体大小？ 我将它与 React 一起用于前端 JS

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

【参考方案1】：

const useStyle = makeStyles(style => (
    fontSize: 
        "& span:last-child": 
            fontSize:10
        
    
));

<FormControlLabel
    className=classes.fontSize
    control=<Checkbox style= color: blueColor['300']  />
    label="Econom"
/>

【参考方案2】：

我在这里找到了这个：https://kevinyckim33.medium.com/withstyles-material-ui-override-d8f772341390

用 StyledFormControlLabel 包装 FormControlLabel 并在您的代码中使用它，如下所示：

import FormControlLabel from '@material-ui/core/FormControlLabel'
import  withStyles  from '@material-ui/core/styles'
export const StyledFormControlLabel = withStyles(
  root: 
    color: 'red',
  ,
  label: 
    textTransform: 'capitalize',
  ,
)(FormControlLabel)

【参考方案3】：

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

您必须像这样覆盖默认 css：

首先使用您要自定义的属性创建一个样式对象。确保使用 withStyles 方法导出组件 然后在你的组件中，使用 classes 属性来传递你的新 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');

【讨论】：

我在 ES5 中使用 React，它不支持导出：/

【参考方案4】：

根据official Material-UI documentation，您可以覆盖组件样式。所以在你的情况下：

创建您的自定义样式，例如

const useStyles = makeStyles(() => (
    label: 
         fontSize: '0.8em'
     
 ));

将其应用于 FormControlLabel

    <FormControlLabel 
       classes= label: classes.label 
       [...]
    </FormControlLabel>

【参考方案5】：

FormControlLabel 的 label prop 接受 node，因此您可以传入一个 Typography 元素，并按照您在应用中设置其余文本的样式来设置它的样式。

例如。

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

【讨论】：

这个选项可以更好地控制本地标签的样式，而不是在根级别覆盖。

【参考方案6】：

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

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

【参考方案7】：

由于您使用的是带有 ES5 的 React，我可以想象您使用的是 CDN 版本。

因此您可以使用 createMuiTheme 来覆盖 FormControlLabel 中标签字体大小的默认值，如下所示：

var theme = MaterialUI.createMuiTheme(
  overrides: 
    MuiFormControlLabel: 
      label: 
        fontSize: 'new value here'
      
    
  
);

ReactDOM.render(
  <ThemeProvider theme=theme>
    <App />
  </ThemeProvider>,
  document.querySelector('#root'),
);

这是一个例子https://github.com/mui-org/material-ui/tree/master/examples/cdn

请按照官方文档说明：

您可以开始使用具有最少前端基础架构的 Material-UI，这非常适合原型设计。

提供了两个通用模块定义 (UMD) 文件：

开发者：https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js 一个用于生产：https://unpkg.com/@material-ui/core@latest/umd/material-ui.production.min.js 您可以按照此 CDN 示例快速入门。

⚠️ 虽然不鼓励在生产中使用这种方法 - 客户端必须下载整个库，无论实际使用哪些组件，这会影响性能和带宽利用率。

⚠️ UMD 链接使用最新标签指向库的最新版本。这个指针是不稳定的，它会随着我们发布新版本而改变。您应该考虑指向特定版本，例如 v4.4.0。

【参考方案8】：

使用主题：

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

Themes Documentation