overwrite the font size of this class .MuiTypography-body1

Question

• I tried to overwrite the font size of this class .MuiTypography-body1
• so I researched and found this link https://material-ui.com/api/typography/
• but the problem is its not overwriting
• can you tell me how to fix it.
• providing my code snippet below and sandbox below

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

const useStyles = makeStyles(theme => ({
  root: {
    fontSize: "2"
  },


  checkboxLabel: {
    border: "1px solid black",
    fontWeight: "100",
    fontSize: "20"
  },
  body1Text: {
    fontSize: "2"
  }
}));


 <div
      classes={{
        body1: classes.body1Text
      }}
      className={classes.root}
    >
      <FormControl
        classes={{
          body1: classes.body1Text
        }}
        component="fieldset"
        className={classes.formControl}
      >
        <FormLabel
          classes={{
            body1: classes.body1Text
          }}
          component="legend"
        >
          Gender
        </FormLabel>
        <RadioGroup
          classes={{
            body1: classes.body1Text
          }}
          aria-label="gender"
          name="gender1"
          className={classes.group}
          value={value}
          onChange={handleChange}
        >
          {console.log("props", props)}
          {props.radioValues.map(val => {
            return (
              <FormControlLabel
                classes={{
                  body1: classes.body1Text,
                  label: classes.checkboxLabel
                }}
                style={{
                  fontWeight: "300",
                  fontSize: "2",
                  border: "1px solid red"
                }}
                value={val}
                control={
                  <Radio
                    classes={{
                      body1: classes.body1Text
                    }}
                    style={{
                      fontWeight: "100",
                      fontSize: "1",
                      border: "1px solid red"
                    }}
                    // classes={{
                    //   label: classes.checkboxLabel
                    // }}
                  />
                }
                label={val}
              />
            );
          })}
        </RadioGroup>
      </FormControl>
    </div>

Answer 1

You can directly use style={{fontSize:'sizeValue'}}. That can also work.

Answer 2

You were almost there. You just had to specify a unit for the font size:

  checkboxLabel: {
     border: "1px solid black",
     fontWeight: "100",
     fontSize: "20px"
  },

Explanation: You wanted to override the Typography styles. Refer to FormControlLabel api: https://material-ui.com/api/form-control-label/#formcontrollabel-api

In the css section, they specify you need to use use 'label' rule name to override Typography styles. That's what you did in FormControlLabel classes:

 classes={{
              body1: classes.body1Text,
              label: classes.checkboxLabel // here
            }}

You can refer to a working demo where I override all Typography-body1 styles: https://codesandbox.io/s/material-demo-h685r?fontsize=14