- I attempted to change the font size of the .MuiTypography-body1 class
- After doing some research, I came across this helpful link https://material-ui.com/api/typography/
- Unfortunately, I'm having trouble with the override not working as expected
- Could someone provide guidance on how to resolve this issue?
- Below is my code snippet and sandbox demo for reference.
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"
}}
/>
}
label={val}
/>
);
})}
</RadioGroup>
</FormControl>
</div>