更改复选框和单选按钮标签的字体大小答案

【问题标题】：change the font size of the checkbox and radio buttons labels更改复选框和单选按钮标签的字体大小
【发布时间】：2019-07-11 14:40:11
【问题描述】：

我正在尝试更改复选框和单选按钮标签的字体大小。我尝试给这个组件复选框提供css，但它没有改变标签的字体大小因为标签是动态添加的。所以我研究并找到了这个链接。 https://material-ui.com/api/radio/#css https://material-ui.com/customization/components/#overriding-styles-with-classes 但这对我没有帮助。你能告诉我如何解决它。在下面提供我的代码 sn-p 和沙箱。

https://codesandbox.io/s/material-demo-u95z5

const styles = theme => ({
  root: {
    display: "flex"
  },
  formControl: {
    margin: theme.spacing.unit * 3
  },
  group: {
    margin: `${theme.spacing.unit}px 0`
  },
  checkboxCSS: {
    border: "1px solid red",
    fontSize: 40
  }
});


return (
      <div className={classes.root}>
        <FormControl component="fieldset" className={classes.formControl}>
          <FormLabel component="legend">Gender</FormLabel>
          <RadioGroup
            aria-label="Gender"
            name="gender1"
            className={classes.group}
            value={this.state.value}
            onChange={this.handleRadioValueChange}
          >
            {radioValues.map(radio => {
              return (
                <FormControlLabel
                  value={radio.value}
                  control={<Radio />}
                  label={radio.label}
                />
              );
            })}
          </RadioGroup>
          {checkBoxvalues.map((check, index) => {
            console.log("this.state[check.value]", this.state[check.value]);
            return (
              <FormControlLabel
                key={check.value}
                control={
                  <Checkbox
                    checked={check.checked}
                    onChange={this.handleCheckBoxChange(check.value, index)}
                    value={check.value}
                    className={classes.checkboxCSS}
                  />
                }
                label={check.label}
              />
            );
          })}
        </FormControl>
      </div>
    );

【问题讨论】：

标签： javascript html css reactjs redux

【解决方案1】：

这个链接帮助了我：https://material-ui.com/api/form-control-label/#css

以下内容适用于您的沙盒。

在类对象中：

{
    ...,
    checkboxLabel: {
        fontSize: 40
    }
}

在 FormControlLabel 组件上添加：

classes={{
    label:classes.checkboxLabel
}}

【讨论】：