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

Question

I am trying to change the font size of the checkbox and radio buttons labels. I tried giving css to this component Checkbox but it's not changing the label's font size since the labels are added dynamically. so I researched and found this links. https://material-ui.com/api/radio/#css https://material-ui.com/customization/components/#overriding-styles-with-classes but this is not helping me. can you tell me how to fix it. providing my code snippet and sandbox below.

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

This link helped me: https://material-ui.com/api/form-control-label/#css

The following works in your sandbox.

In the classes object:

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

On the FormControlLabel component add:

classes={{
    label:classes.checkboxLabel
}}