Material UI v5.1.0에서 커스텀 타이포그래피 변형을 추가하는 방법
이 튜토리얼에서는 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에서 전체 소스 코드 사용 가능
Reference
이 문제에 관하여(Material UI v5.1.0에서 커스텀 타이포그래피 변형을 추가하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/jasurkurbanov/how-to-add-custom-typography-variants-in-material-ui-v510-dni텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)