[React] Material-UI

전현정·2021년 12월 7일

React

목록 보기

3/4

Material-Ui

Material-UI는 리액트 개발 시 쉽게 사용할 수 있는 UI Framework.

Material-Ui에서는 자주 사용되는 기능/ 디자인들을 component/API로 제공해 React로 개발할때 다양한 UI를 쉽게 만들 수 있다.기능적인 UI를 제공하면서 다양하게 커스터마이징을 할 수 있다는 점이 가장 매력적이다.

설치하기

@material-ui/core

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

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

@material-ui/icons

material에서 제공하는 icon

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

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

사용하기

import

import를 해서 쉽게 사용 할 수 있다.

import AppBar from "@material-ui/core/AppBar";
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";

간단하게 작성하는 방법

import { AppBar, Tabs, Tab } from "@material-ui/core";

적용하기

기본 스타일 적용

import * as React from 'react';
import ReactDOM from 'react-dom';
import Button from '@mui/material/Button'; //Button import

function App() {
  return (
  <Button variant="contained">
    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";
import { makeStyles } from "@material-ui/core/styles"; // styles 기능 추가

const useStyles = makeStyles(theme => ({  // style 요소 선언
  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>

  );
}