221223 항해99 47일차 Material-UI

• Material-UI은 리액트 개발에서 쉽게 사용할 수 있는 UI Framework이다.

Material-UI 홈페이지
Material-UI 블로그

설치하기

• npm, yarn을 이용해 설치한다.

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

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

• SVG Icons 사용 시

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

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

• 다양한 기본 아이콘을 제공한다.
  

사용법

• 사용하고자 하는 항목을 import 한다
• 사용한다
• (응용) styles을 이용하여 각 component를 커스텀마이징 한다.

기본 스타일 사용

import React from 'react';
import ReactDOM from 'react-dom';
// Button을 import 한다.
import Button from '@material-ui/core/Button'; 

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

ReactDOM.render(<App />, document.querySelector('#app'));

커스텀 마이징 하기 (응용)

• Component에 css 값을 변경해주면 된다.
• 각 태그마다 선언하는게 아니라 styles을 사용하면 보기 쉽게 변경할 수 있다.
  (Material-UI에서 제공하는 Templete에서 사용하는 방법입니다. 태그에 직접 추가 하는 방식으로 해도 된다.)

import React from "react";
import Button from "@material-ui/core/Button";
// styles 기능 추가
import { makeStyles } from "@material-ui/core/styles"; 

// style 요소 선언
const useStyles = makeStyles(theme => ({  
  margin: {
    margin: theme.spacing(1),
  }
}));

export default function ButtonComponent() {
  // 생성
  const classes = useStyles();  
  return (
    <div >
      // 사용
      <Button variant="contained" color="primary" className={classes.margin}> 
        Primary
      </Button>
      <Button variant="contained" color="secondary" className={classes.margin}>
        Disabled
      </Button>

    </div>

  );
}

참조:
[React] Material-UI 시작하기