Material UI v5.1.0에서 커스텀 타이포그래피 변형을 추가하는 방법

Material UI에는 Typography 구성 요소에 대한 13 different variants이 있음을 발견했습니다. 내가 일하고 있는 회사에서 프로젝트를 수행하는 동안 타이포그래피 변형을 추가해야 하는 문제를 발견했습니다. 이 튜토리얼에서는 머티리얼 UI에 추가 타이포그래피 변형을 추가하는 방법을 보여드리겠습니다.

이 튜토리얼에서는 Material 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

설정 테마

추가 타이포그래피로 테마를 만들어 봅시다.

theme.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",
    },
  },
});

주목
추가 타이포그래피 변형을 추가하는 방법만 보여주고 있으므로 기본 타이포그래피 변형은 건드리지 않겠습니다. 변형 이름은 데모용입니다.

ThemeProvider에 사용자 지정 테마 추가

index.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에서 전체 소스 코드 사용 가능