如何更改formcontrollabel的默认印刷类-material-ui | Pinkoi有反应吗 [英] How change default typography class of a formcontrollabel - material-ui | React?

问题描述

我想将formControlLabel的默认道具从body更改为caption.我尝试了一下，它奏效了:

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.

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

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

推荐答案

FormControlLabel不能不提供用于控制Typography变体的机制.这已经被要求过，并且在本期中进行了讨论: https://github .com/mui-org/material-ui/issues/16643 .

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.

您的主要选择是:

• 使用所需的变体形式(如您在问题中所显示的那样)将其文本包装在自己的Typography中.
• 直接使用label和Typography元素，而不是模仿 https://github.com/mui-org/material-ui/blob/v4.5.2/packages/material-ui/src/styles/createTypography.js#L73 )

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

这两个选项看起来并不完全相同.与没有额外的包装层相比，第一种情况下body1包装的行高会导致文本下移一两个像素，所以我建议使用我的最后一个选择.

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.

这篇关于如何更改formcontrollabel的默认印刷类-material-ui | Pinkoi有反应吗的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！