반응형
Material UI란?
Material UI (이하 MUI)는 리액트 개발에서 쉽게 사용할 수 있는 UI 프레임워크다. autocomplete, 버튼, 체크박스, 슬라이더, alert 등 아주 다양한 컴포넌트를 제공하여, 빠르고 손쉽게 퀄리티 있는 UI를 완성할 수 있게 한다. 개인적으로 스타일링을 커스터마이징 하는데 애를 먹은 기억이 있는데, 그 외에는 만족스러웠다. 필요한 컴포넌트를 고른 뒤 문서에서 각 컴포넌트에 대한 사용법을 보고 적용하면 된다.
설치하기
MUI는 emotion이라는 스타일링 엔진을 기본으로 사용한다.
npm install @mui/material @emotion/react @emotion/styledemotion이 아닌 Styled-component를 사용하고 싶다면 아래처럼 설치하면 된다.
npm install @mui/material @mui/styled-engine-sc styled-componentsMUI가 제공하는 SVG 아이콘들을 사용하려면 아래처럼 추가 설치가 필요하다.
npm install @mui/icons-material
공식 문서
MUI: The React component library you always wanted
MUI provides a simple, customizable, and accessible library of React components. Follow your own design system, or start with Material Design. You will develop React applications faster.
mui.com
반응형
'웹_프론트엔드 > 로드맵 챌린지' 카테고리의 다른 글
| CSS 프레임워크 - Chakra (차크라) (0) | 2022.03.04 |
|---|---|
| CSS 프레임워크 - Tailwind CSS (0) | 2022.03.03 |
| CSS 프레임워크 - reactstrap (0) | 2022.02.28 |
| 웹 컴포넌트란? HTML Template, Custom Elements, Shadow DOM (0) | 2022.02.25 |
| Modern CSS - Emotion이란? (0) | 2022.02.24 |