Question

我正在尝试更改复选框和单选按钮标签的字体大小。我尝试将CSS赋予此组件Checkbox，但它没有更改标签的字体大小因为标签是动态添加的。因此我研究并找到了此链接。 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

以下内容在您的沙箱中起作用。

在classes对象中：

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

在FormControlLabel组件上，添加：

classes={{
    label:classes.checkboxLabel
}}

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

1 个答案: