[Material-UI] 기초(1) - 설치 및 시작하기

 Material-UI란?

 

부트스트랩, antd와 같이 빠르고 쉽게 웹 개발을 위한 웹 디자인 CSS를 도와주는 프레임워크이다. 

다양한 테마들을 제공해준다

 

 설치하기

 

Material-UI는 npm패키지로 제공된다. 터미널에 아래와 같이 입력하고 설치해준다.

// with npm
npm install @material-ui/core

// with yarn
yarn add @material-ui/core

아래와 같이 간단하게 import해와서 Material-UI에서 이미 지정해 둔 스타일로 버튼을 만들 수 있다.

import React from 'react';
import { Button } from '@material-ui/core';

function App() {
  return <Button variant="contained" color="primary">Hello World</Button>;
}

아이콘을 사용하고 싶다면 @material-ui/icons를 설치해준다.

// with npm
npm install @material-ui/icons

// with yarn
yarn add @material-ui/icons

그리고 원하는 아이콘을 import한 뒤 사용해주면 된다.

import React from 'react';
import { Button } from '@material-ui/core';
import MenuIcon from '@material-ui/icons/Menu';

function App() {
  return(
    <div>
      <Button variant="outlined" color="disabled"><MenuIcon /></Button>
    </div>
  )
}

export default App;

아래의 링크에서 1117개의 아이콘을 검색해서 사용하면 된다.

 

https://material-ui.com/components/material-icons/

Material Icons - Material-UI

 

그리고 아이콘의 모양, 색상, 크기 등을 변경하기 위해서는 아래의 가이드를 참고하면 된다.

https://material-ui.com/components/icons/

React Icon Component - Material-UI