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

问题

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

回答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.

来源：https://stackoverflow.com/questions/58674888/how-change-default-typography-class-of-a-formcontrollabel-material-ui-react

标签

reactjs

material-ui