How change default typography class of a formcontrollabel - material-ui | React?

Question

I would like change the default props of a formControlLabel from body to caption. I tried it and it worked:

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

But that's not exactly the effect I want, in this case I just include one more span involving the original span:

Sometimes I fall into the same problem trying to change the default element classes, unfortunately the documentation didn't help me understand what I should do in these cases.

The exemple code and another failed attempts can be found here.

---

I Just want change default class property from MuiTypography-root MuiFormControlLabel-label MuiTypography-body1 to MuiTypography-root MuiFormControlLabel-label MuiTypography-caption without include a new span element

Answer 1

FormControlLabel does not provide a mechanism for controlling the Typography variant. This has been asked for before and is discussed in this issue: https://github.com/mui-org/material-ui/issues/16643.

Your main options are:

• Wrap your text in its own Typography with the desired variant (as you showed in the question).
• Use label and Typography elements directly instead of FormControlLabel imitating its implementation
• Use a CSS class to alter the body1 styling to match the caption styling (https://github.com/mui-org/material-ui/blob/v4.5.2/packages/material-ui/src/styles/createTypography.js#L73)

You can see the first and last options side-by-side in this example:

import React from "react";
import ReactDOM from "react-dom";

import FormControlLabel from "@material-ui/core/FormControlLabel";
import Radio from "@material-ui/core/Radio";
import Typography from "@material-ui/core/Typography";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles(theme => ({
  label: {
    fontSize: theme.typography.pxToRem(12),
    letterSpacing: "0.03333em",
    lineHeight: 1.66
  }
}));

function App() {
  const classes = useStyles();
  return (
    <>
      <FormControlLabel
        value="all"
        control={<Radio color="primary" />}
        label={<Typography variant="caption">first</Typography>}
        labelPlacement="end"
      />
      <FormControlLabel
        value="all"
        control={<Radio color="primary" />}
        label="first"
        labelPlacement="end"
        classes={classes}
      />
    </>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

These two options do not look quite identical. The line-height of the body1 wrapper in the first case causes the text to be shifted a pixel or two down compared to not having the extra wrapper layer, so I would recommend my last option.

Answer 2

This seem to work for me with v5, using sx prop

           sx={{
              mr: 3,
              '.MuiFormControlLabel-label': {
                fontSize: 12,
              },
            }}

...

<FormGroup>
          <FormControlLabel
            labelPlacement="start"
            label={`${theme.palette.mode} mode`}
            control={
              <MaterialUISwitch
                onChange={colorMode.toggleColorMode}
                checked={theme.palette.mode === 'dark' ? true : false}
                sx={{ m: 1 }}
                className="bar"
              />
            }
            sx={{
              mr: 3,
              '.MuiFormControlLabel-label': {
                fontSize: 12,
              },
            }}
          />
        </FormGroup>