728x90
반응형
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
728x90
반응형
'프론트엔드' 카테고리의 다른 글
| 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 |
