[React] MUI (Material-UI) 이용한 리액트 화면 디자인

https://mui.com/

MUI: The React component library you always wanted

 

mui는 마치 react-icon 같은 느낌이다.

 

컴포넌트를 만들때 ui적으로 깔끔한 디자인이 입혀진 얘들을 그냥 가져다가 쓰기만 하면 된다!

 

사용법도 리액트 아이콘과 같다.

 

먼저 라이브러리를 추가해주고 ,

//npm 이용시
npm install @mui/material @emotion/react @emotion/styled

//yarn이용시
yarn add @mui/material @emotion/react @emotion/styled

 

내가 원하는 컴포넌트를 골라서 import 해온 뒤 , 사용만 하면 끝이다.

 

💙 버튼 만들기

1. Get started

2. 왼쪽 메뉴바에서 Components > Button 클릭

 

 

3. 원하는 버튼 형태에서 <> 아이콘을 누르면 import 코드를 복사해서 사용할 수 있다.

 

💙 버튼 그룹화 하기

 

비슷한 종류의 버튼끼리 한묶음으로 묶어줄 수도 있

 

 

마찬가지로 왼쪽 사이드 바에서 Component > Button Group

을 눌러서 들어간다

 

 

 

 

 

 

 

그러면 이런식으로 버튼을 그룹 지어서 표현해줄 수 있음

이런 식으로 버튼을 감싸주면 , 감싸진 버튼들이 묶음이 되고 나머지 버튼은 그냥 별개로 표시된다 !