How to change the standard typography class in a formcontrollabel - material-ui | React?

Question

I would like to change the default properties of a formControlLabel of body for caption. I tried something like this and it worked:

<FormControlLabel
  value="all"
  control={<Radio color="primary" />}
  label={
    <Typography variant="caption">
      first
    </Typography>
  }
  labelPlacement="end"
/>

But it’s not exactly the effect I want, in which case I just include a new span involving the original span:

Sometimes I have the same problem trying to change the standard classes of an element, unfortunately the documentation did not help me much to understand what I should do in these cases.

Example code and other failed attempts can be found here.

Answer 1

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.