如何更改表单控件标签的默认排版类-material-ui |反应？

我想更改 formControlLabel 的默认属性body to caption。我尝试了一下并且成功了：

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

但这并不完全是我想要的效果，在这种情况下，我只添加一个涉及原始跨度的跨度：

有时，我在尝试更改默认元素类时会遇到同样的问题，不幸的是，文档无法帮助我理解在这些情况下应该做什么。

可以找到示例代码和其他失败的尝试here https://stackblitz.com/edit/mb-react-radio.

我只想更改默认类属性MuiTypography-root MuiFormControlLabel-label MuiTypography-body1 to MuiTypography-root MuiFormControlLabel-label MuiTypography-caption不包含新的 span 元素

FormControlLabel does not提供一种控制机制Typography变体。之前已经有人提出过这个问题，并在本期中进行了讨论：https://github.com/mui-org/material-ui/issues/16643 https://github.com/mui-org/material-ui/issues/16643.

您的主要选择是：

• 将您的文本包裹在自己的文本中Typography与所需的变体（如您在问题中所示）。
• Use label and Typography直接使用元素代替FormControlLabel模仿其实施 https://github.com/mui-org/material-ui/blob/v4.5.2/packages/material-ui/src/FormControlLabel/FormControlLabel.js#L91
• 使用 CSS 类来改变body1款式要匹配caption造型（https://github.com/mui-org/material-ui/blob/v4.5.2/packages/material-ui/src/styles/createTypography.js#L73 https://github.com/mui-org/material-ui/blob/v4.5.2/packages/material-ui/src/styles/createTypography.js#L73)

您可以在此示例中并排看到第一个和最后一个选项：

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);

这两个选项看起来并不完全相同。的线高body1与没有额外的包装层相比，第一种情况下的包装器会导致文本向下移动一两个像素，所以我会推荐我的最后一个选项。