Question

我想将formControlLabel的默认属性从body更改为caption。我尝试了一下，它起作用了：

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

但这并不是我想要的效果，在这种情况下，我只添加了一个包含原始跨度的跨度：

有时候，尝试更改默认元素类时会遇到相同的问题，但是不幸的是，文档没有帮助我理解在这种情况下应采取的措施。

可以找到示例代码和另一个失败的尝试here。

我只想将默认类属性从MuiTypography-root MuiFormControlLabel-label MuiTypography-body1更改为MuiTypography-root MuiFormControlLabel-label MuiTypography-caption，而无需添加新的span元素

Answer 1

FormControlLabel不能不提供控制Typography变体的机制。之前已经要求过此问题，并将在本期https://github.com/mui-org/material-ui/issues/16643中进行讨论。

您的主要选择是：

用所需的变体形式（如您在问题中所显示的那样）将文本用Typography换行。
直接使用label和Typography元素，而不是FormControlLabel模仿its implementation
使用CSS类更改body1样式以匹配caption样式（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包装层的行高会导致文本下移一两个像素，所以我建议使用我的最后一个选择。

如何更改formcontrollabel的默认印刷类-material-ui |反应吗

1 个答案: