Question

如何更改FormControlLabel中标签的字体大小？我在React前端JS中使用它

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

Answer 1

您可以遵循此网址https://material-ui.com/api/form-control-label/。您必须像这样重写默认类，首先使用styleStyle方法将样式属性导出，然后导出您的组件

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

export default withStyles(styles)('YOUR_COMPONENT');

Answer 2

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

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

Answer 3

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

创建自定义样式，例如

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

将其应用于FormControlLabel

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

Answer 4

使用主题：

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

Themes Documentation

Answer 5

由于您将React与ES5一起使用，我可以想象您正在使用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。

Answer 6

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

例如

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

Answer 7

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

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

材质用户界面-如何在FormControlLabel中更改标签的字体大小

7 个答案:

请根据官方文档注明：