[解決済み] formcontrollabel - material-ui | Reactのデフォルトのtypography classを変更するには？

質問

formControlLabelのデフォルトプロパティを次のように変更したい。 body から caption . 試してみたら、うまくいきました。

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

しかし、これは私が望む効果ではありません。この場合、元のスパンを含むもう1つのスパンを含めるだけです。

時々、デフォルトの要素クラスを変更しようとして同じ問題に陥ることがあります。残念ながら、ドキュメントではこのような場合にどうすればよいかを理解する助けにはなりませんでした。

サンプルコードと他の失敗例はこちら こちら .

のデフォルトクラスプロパティを変更したいだけです。 MuiTypography-root MuiFormControlLabel-label MuiTypography-body1 から MuiTypography-root MuiFormControlLabel-label MuiTypography-caption 新しいspan要素を含めずに

解決方法は？

FormControlLabel が行います。 ではない を制御するためのメカニズムを提供します。 Typography バリアントを使用します。これは以前から求められていたもので、この問題で議論されています。 https://github.com/mui-org/material-ui/issues/16643 .

主な選択肢は以下の通りです。

• テキストを独自の Typography を希望するバリアント（質問で示されたように）で表示します。
• 使用方法 label と Typography 要素の代わりに直接 FormControlLabel 模倣 その実装
• 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);

この2つのオプションは、全く同じには見えません。のラインハイトが body1 の場合、余分なラッパーレイヤーがない場合と比較して、テキストが1ピクセルか2ピクセル下に移動してしまいますので、最後のオプションをお勧めします。