[MUI] 시작하기

MUI(material-UI) 라이브러리

• 리액트 UI 도구
• 디자인이 미리 적용되어 완성된 UI 컴포넌트 사용 가능
• 사용자화 가능한 테마 통해 일관된 스타일 적용
• 빈응형 디자인 지원 및 다양한 기능, 유틸리티 제공

https://mui.com/

MUI: The React component library you always wanted

 

 

라이브러리 설치

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

 

mui 사용 방법

import Button from '@mui/material/Button';

return(
	<>
    <Button>
    	안녕
    </Button>
    </>
  );
}

Props로 옵션들을 전달하면 됨.

 

• variant: 버튼의 스타일 지정

• contained: 색상이 채워진 버튼
• outlined: 테두리만 있는 버튼

• color: 버튼 색상 지정

• primary: 주요 색상
• secondary: 보조 색상

 

대표적으로 많이 사용되는 컴포넌트

• Button(버튼): 사용자의 상호작용을 유도하거나 액션 수행 버튼
• TextField(텍스트 필드): 텍스트 입력 받는 입력란
• Typography(타이포그래피): 다양한 텍스트 스타일 적용
• AppBar(앱바): 상단에 고정된 헤더 영역
• Card(카드): 정보를 담고 있는 작은 영역 나타냄. 이미지, 텍스트, 액션 등 포함
• Dialog(다이얼로그): 모달 형태를 나타나는 대화상자
• IconButton(아이콘 버튼): 아이콘 포함한 버튼

---

 

CSS 정규화

각 브라우저마다 CSS 스타일이 다름

브라우저가 달라도 화면 통일하고 싶은 경우     -> "MUI에서 지원"

 

https://mui.com/material-ui/react-css-baseline/

CSS Baseline - Material UI

 

사용 방법

import * as React from 'react';
import CssBaseline from '@mui/material/CssBaseline';

export default function MyApp() {
  return (
    <React.Fragment>
      <CssBaseline />
      {/* The rest of your application */}
    </React.Fragment>
  );
}