Material UI란?

Google의 Material Design을 구현하는 오픈 소스 React Component 라이브러리

🌐 공식 사이트: https://mui.com/

설치 방법

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

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

사용해보기

사용법은 정말 간단하다.

아래의 사이트에 접속해 필요한 초기 세팅을 해준다.
https://mui.com/material-ui/getting-started/installation/

초기 세팅 후 Components 토글을 누르면 다양한 종류의 Component들이 있다.
그 중에 나는 Button Component를 사용해 보려고 한다.

이런식으로 사용할 Component를 import해주고 사용하면

import './App.css';
import Button from '@mui/material/Button'

function App() {
  return (
    <div>
      <Button>Button</Button>
      <Button variant="text">Button</Button>
      <Button size="large" variant="contained">Button</Button>
      <Button variant="outlined">Button</Button>
    </div>
  );
}

export default App;

이런식으로 버튼들이 잘 나오게 된다.
내가 사용하고싶은 디자인에 따라 프로퍼티를 수정해주면 원하는 버튼을 만들 수 있다.

그리고 버튼 앞이나 뒤에 원하는 아이콘을 넣고 싶을 때에는
https://mui.com/material-ui/material-icons/ 에 들어가면

다양한 아이콘들을 검색할 수 있다.

원하는 아이콘을 찾은뒤 import문을 복사해준 뒤

코드에 추가해주고
앞에 추가 하고 싶을 때에는 startIcon={ }울,
뒤에 추가 하고 싶을 때에는 endIcon={ }을 사용하여 해당 아이콘을 넣어주면

import './App.css';
import Button from '@mui/material/Button'
import AddPhotoAlternateIcon from '@mui/icons-material/AddPhotoAlternate';
import DeleteIcon from '@mui/icons-material/Delete';

function App() {
  return (
    <div>
      <Button variant="contained" startIcon={<AddPhotoAlternateIcon/>}>UPLOAD</Button>
      <Button variant="contained" endIcon={<DeleteIcon/>}>DELETE</Button>
    </div>
  );
}

export default App;

이렇게 버튼이 완성이된다!

또한 추가적으로 스타일을 적용하고 싶을때에는 sx={ }을 이용해 수정해주면된다.

import './App.css';
import Button from '@mui/material/Button'

function App() {
  return (
    <div>
      <Button 
        variant="contained"
        sx={{
          backgroundColor: 'pink',
          color: 'white',
          margin: 10,
          "&:hover": {
            backgroundColor: 'white',
            color: 'pink'
          }
        }
        }
      >UPLOAD</Button>
    </div>
  );
}

export default App;

이렇게 스타일해준 버튼은 이렇게 적용된다.

지금은 버튼만 사용했지만 MUI를 이용하면 다양한 Component들의 CSS를 보다 빠르고 편리하게 적용할 수 있어 앞으로 종종 사용할 것 같다!