React UI 프레임워크 Material UI 사용하기

남예지·2022년 12월 6일
0

프레임워크

목록 보기
1/1

사용해본 예제를 올려볼까 한다. 나중에 쓰기도 하고 다른분들께도 도움이 되면 더 좋겠다.

설치

❕기본 설치❕
다음 명령 중 하나를 실행하여 Material UI를 프로젝트에 추가합니다.

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

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


❕스타일 구성 요소 사용❕
Material UI는 Emotion 을 기본 스타일링 엔진으로 사용합니다. styled-components 를 대신 사용 하려면 다음 명령 중 하나를 실행하십시오.

npm
npm install @mui/material @mui/styled-engine-sc styled-components

yarn
yarn add @mui/material @mui/styled-engine-sc styled-components

엔진가이드 참고-> https://mui.com/material-ui/guides/styled-engine/


❕Roboto 글꼴❕
Material UI는 기본적으로 Roboto 글꼴을 사용하도록 설계되었습니다. Fontsource 를 통해 npm 또는 yarn을 사용하거나 Google Fonts CDN 을 사용하여 프로젝트에 추가할 수 있습니다 .

npm
npm install @fontsource/roboto

yarn
yarn add @fontsource/roboto

이렇게 사용할 수 있습니다.

import '@fontsource/roboto/300.css';
import '@fontsource/roboto/400.css';
import '@fontsource/roboto/500.css';
import '@fontsource/roboto/700.css';

Google Web Fonts CDN을 사용하려면 아래 링크를 head태그에 넣으세요

<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>

❕아이콘❕
글꼴 아이콘 구성 요소 또는 미리 빌드된 SVG 재질 아이콘(예: 아이콘 데모 에 있는 아이콘)을 사용 하려면 먼저 재질 아이콘 글꼴을 설치해야 합니다.

npm
npm install @mui/icons-material

yarn
yarn add @mui/icons-material

Google Web Fonts CDN을 사용해 Material Icons 글꼴을 설치하려면 아래 링크를 head태그에 넣으세요

<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>

설치는 여기서 끝.
CDN 등 할 수 있는게 더 있지만 별로 권장하지 않는다고 함.
사이트에 들어가서 더 확인해보길..
https://mui.com/material-ui/getting-started/installation/


profile
총총

0개의 댓글