材料UI V 5でカスタムタイポグラフィ変種を加える方法.1.0

私は、材料UIは、タイポグラフィーコンポーネントの13 different variantsを持っていることがわかりました.私が働いている会社でプロジェクトをしている間、私は問題に遭遇しました、そこで、私はそれを余分なタイポグラフィ変種を加える必要があります.このチュートリアルでは、マテリアルUIで余分なタイポグラフィを追加する方法を示します.
このチュートリアルでサポートされているUIのバージョン5.1.0.

プロジェクトの作成

npx create-react-app my-app
cd my-app
npm start

マテリアルUIのインストール

// with npm
npm install @mui/material @emotion/react @emotion/styled

// with yarn
yarn add @mui/material @emotion/react @emotion/styled

セットアップテーマ
我々の余分なタイポグラフィで我々のテーマをつくりましょう

テーマ.js

export const theme = createTheme({
  typography: {
    body1_medium: {
      lineHeight: 1.6,
      fontSize: 24,
      fontWeight: 500,
    },
    body2_medium: {
      lineHeight: 1.6,
      fontSize: 18,
      fontWeight: 500,
    },
    p1_italic: {
      lineHeight: 2.6,
      fontSize: 26,
      fontStyle: "italic",
      fontWeight: 800,
    },
    p1_bold: {
      lineHeight: 2.6,
      fontSize: 22,
      fontStyle: "bold",
      fontWeight: 700,
    },
    p1_error: {
      fontStyle: "bold",
      fontWeight: 300,
      color: "red",
    },
    p2_highlighted: {
      fontStyle: "italic",
      fontWeight: 500,
      backgroundColor: "yellow",
    },
  },
});

注意
私は、あなたが余分なタイポグラフィ変種を加えることを示すだけです.バリアント名は、デモ目的のためだけです
テーマにカスタムテーマを追加

インデックス.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import { ThemeProvider } from "@mui/material/styles";
import { theme } from "./theme";

ReactDOM.render(
  <ThemeProvider theme={theme}>
    <App />
  </ThemeProvider>,
  document.getElementById("root")
);

用途

import Typography from "@mui/material/Typography";

function App() {
  return (
    <div className="App">
      <Typography variant="body1_medium">
        Lorem Ipsum is simply dummy text of the industry.
      </Typography>
      <br />
      <Typography variant="body2_medium">
        Lorem Ipsum is simply dummy text of the industry.
      </Typography>
      <br />
      <Typography variant="p1_error">
        Lorem Ipsum is simply dummy text of the industry.
      </Typography>
      <br />
      <Typography variant="p1_italic">
        Lorem Ipsum is simply dummy text of the industry.
      </Typography>
      <br />
      <Typography variant="p2_bold">
        Lorem Ipsum is simply dummy text of the industry.
      </Typography>
      <br />
      <Typography variant="p2_highlighted">
        Lorem Ipsum is simply dummy text of the industry.
      </Typography>
    </div>
  );
}

export default App;

結果

Githubで利用できる完全なソースコード