изменить размер шрифта ярлыков переключателей и переключателей

Question

Я пытаюсь изменить размер шрифта ярлыков флажка и переключателей. Я попытался дать css для этого компонента флажок, но он не меняет размер шрифта метки поскольку метки добавляются динамически. поэтому я исследовал и нашел эту ссылку. https://material -ui.com / api / radio / # css https://material -ui.com / настройка / компоненты / # 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
}}