如何更改 formcontrollabel 的默认排版类 - material-ui |反应？

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 包装器的行高会导致文本与没有额外的包装器层相比向下移动一两个像素，所以我会推荐我的最后一个选项。

Answer 2

这似乎适用于 v5，使用 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>