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

Question

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

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>
    );

Answer 1

此链接对我有帮助:https://material-ui.com/api/form-control-label/#css

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

在类对象中:

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

在 FormControlLabel 组件上添加:

classes={{
    label:classes.checkboxLabel
}}