Material UI

Material UI는 리액트 개발에서 쉽게 사용할수 있는 UI 프레임워크이다. 부트 스트랩과 마찬가지로 자주 사용되는 기능 디자인들을 Component 형식으로 제공해주어서 다양한 UI를 쉽게 만들 수 있다.

설치법

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

icon 설치법

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

사용법

기본적으로 사용방식은 비슷하다 공식 문서를 보고 컴포넌트들을 import 해주고 이를 가져가 사용해 주면 된다.

import Button from '@mui/material/Button';


      <Button variant="contained">Hello world</Button>

import {AppBar, Tabs, Tab } from "@mui/material";


 <AppBar position="static">
        <Tabs  aria-label="Main Tabs">
          <Tab label="Home" />
          <Tab label="Send" />
          <Tab label="Profile" />
        </Tabs>
      </AppBar>


import {Checkbox} from "@mui/material";

      <Checkbox {...label} defaultChecked />
      <Checkbox {...label} />
      <Checkbox {...label} disabled />
      <Checkbox {...label} disabled checked />