Material UI(MUI)는 Google의 Material Design을 구현하는 오픈소스 React UI 구성 라이브러리이다.
현재 가장 많이 쓰이고 있는 React UI 컴포넌트 라이브러리 중에 하나이다.
패키지 설치
Material UI는 core, system, utils, icons 등 여러 개의 패키지로 구성되어 있다.
핵심적인 기능을 담고있는 @material-ui/core
$ npm i @material-ui/core
- React 18과 Material-UI v4 호환 문제 : Material-UI v4는 React 18과 호환되지 않아, v5로 업그레이드
$ npm install @mui/material @emotion/react @emotion/styled
폰트 불러오기
Material UI는 기본적으로 Roboto 폰트를 사용하고 있다.
index.html 파일의 <head>에 폰트 링크를 추가한다.
<head>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>
</head>
Typography 컴포넌트
HTML로 마크업을 할 때는 <h1>, <h2>, <p>와 같은 태그를 사용하지만,
Material UI에서는 <Typography>라는 하나의 컴포넌트를 사용해서 자유자재로 다양한 스타일의 텍스트를 연출할 수 있다.
// @material-ui/core 패키지로부터 <Typography/> 컴포넌트를 불러와서 원하는 텍스트를 감싸주기만 하면 된다.
import { Typography } from "@material-ui/core";
export default () => <Typography>텍스트</Typography>;
// 텍스트의 크기는 'variant' prop으로 제어할 수 있다.
<Typography variant="h1">Heading1</Typography>
<Typography variant="h2">Heading2</Typography>
<Typography variant="h3">Heading3</Typography>
<Typography variant="body1">body1</Typography>
<Typography variant="body2">body2</Typography>
// 'variant' prop과 상이한 HTML 태그를 사용해야 할 때는 component prop으로 태그명을 명시한다.
<Typography component="h1" variant="h4">Title</Typography>
// 텍스트는의 색상은 color prop으로 제어할 수 있다.
<Typography color="primary">Primary</Typography>
<Typography color="secondary">Secondary</Typography>
<Typography color="textPrimary">Heading3</Typography>
<Typography color="textSecondary">body1</Typography>
// 'align' prop을 사용하면 텍스트를 좌측뿐만 아니라, 우측이나 중앙으로도 정렬할 수 있다.
<Typography align="center">Center</Typography>
<Typography align="right">Right</Typography>
<Typography color="left">Left</Typography>
[출처]
https://www.daleseo.com/?tag=MaterialUI
'프론트엔드' 카테고리의 다른 글
| Material UI - Paper, Card (0) | 2024.08.13 |
|---|---|
| Material UI - TextField (0) | 2024.08.13 |
| Material UI - Button (0) | 2024.08.13 |
| Material UI - 아이콘 (0) | 2024.08.13 |
| Webpack? (0) | 2024.08.12 |
