Hello,
There is currently no native way to modify the typography variant of the <FormControlLabel>
.
However here in the documentation describes a form with the use of theme, this way you will have the expected result without generating this element extra in your html, but you will need to use the classes that the Material-UI provides to achieve the element that corresponds to the label.
Follow the code with the option you adopted and the one the documentation suggests:
import React, { useRef, useState } from "react";
import { makeStyles } from "@material-ui/core/styles";
import Typography from "@material-ui/core/Typography";
import Radio from "@material-ui/core/Radio";
import RadioGroup from "@material-ui/core/RadioGroup";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import FormControl from "@material-ui/core/FormControl";
import FormLabel from "@material-ui/core/FormLabel";
import Box from "@material-ui/core/Box";
const useStyles = makeStyles((theme) => ({
label: {
...theme.typography.caption,
},
}));
export default function Branch() {
const [value, setValue] = useState("all");
const handleChange = (event) => {
setValue(event.target.value);
};
const classes = useStyles();
return (
<div>
<FormControl component="fieldset">
<RadioGroup
aria-label="position"
name="position"
value={value}
onChange={handleChange}
row
>
<FormControlLabel
classes={{ label: classes.label }}
variant="caption"
value="all"
control={<Radio color="primary" />}
label="first"
labelPlacement="end"
/>
<FormControlLabel
value="second"
control={<Radio color="primary" />}
label={<Typography variant="caption">Second</Typography>}
labelPlacement="end"
/>
</RadioGroup>
</FormControl>
</div>
);
}
Regarding the question you pointed out about how to customize your components with Material-UI, the Customization section of the documentation has various ways of doing.