MUI

웹페이지의 레이아웃을 쉽고 간단하게 사용할 수 있도록 구현된 와  Container 컴포넌트 컴포넌트는 컨텐츠(내용)을 좌우에 적당한 간격을 두고 화면 중앙에 위치시킬때 사용한다.1. 최대 너비만을 제한하는 fluid 모드2. 항상 동일한 너비를 강제하는 fixed 모드import { Container, Typography } from "@material-ui/core";import { makeStyles } from "@material-ui/core/styles";const useStyles = makeStyles((theme) => ({ container: { background: theme.palette.success.main, },}));export default () => { cons..

Paper 컴포넌트 컴포넌트는 포스트잇처럼 화면에서 도드라져 보이는 효과를 제공한다.elevation, outlined 2가지 형태를 사용할 수 있다.elevation : 영역이 약간 튀어나와 보이게 한다.outlined : 테두리(윤곽선)이 보이게 한다.import { Paper, Typography } from "@material-ui/core";import { makeStyles } from "@material-ui/core/styles";const useStyles = makeStyles((theme) => ({ paper: { padding: theme.spacing(2), },}));export default () => { const classes = useStyles(); ret..

TextField 컴포넌트는 Material UI의 다른 컴포넌트인 , , 등으로 구성되어 있는 고수준 컴포넌트이다.를 사용하면, 여러 개의 하위 컴포넌트를 사용하는 효과를 얻을 수 있다. 형태는 standard, filled, outlined 총 3가지의 형태로 제공된다.standard : 배경색 X, 테두리 X, 밑줄만 표시filled : 배경색 O, 테두리 Xoutlined : 배경색 X, 테두리 Oimport { TextField } from "@material-ui/core";export default () => ( ); 상태는 required나 disabled와 같은 엘리먼트 기본 속성뿐만 아니라, error와 같은 추가적인 상태도 지원한다.'error' prop..

버튼 형태Material UI에는 text, contained, outlined 총 3가지 형태의 버튼을 제공한다.text : 배경색 X, 테두리 X (텍스트에만 스타일 적용)contained : 배경색 O, 테두리 Xoutlined : 배경색 X, 테두리 Oimport { Button } from "@material-ui/core";export default () => ( Text Contained Outlined );색상은 'color' prop을 이용해서 조절할 수 있다.import { Button } from "@material-ui/core";export default () => ( Default Primary Secondar..

패키지 설치1,000 여종의 SVG 아이콘을 제공하는 @material-ui/icons$ npm i @material-ui/icons 사용 방법Material Icons 페이지에서 원하는 아이콘을 검색한다.해당 아이콘 컴포넌트를 불러와서, React 컴포넌트 안에서 바로 사용한다.import EcoIcon from "@material-ui/icons/Eco";export default () => ;아이콘의 색상은 'color' prop으로 바꿀 수 있다.아이콘의 크기는 fontSize prop으로 바꿀 수 있습니다. 커스텀 아이콘 사용하기 컴포넌트를 사용해 커스텀 아이콘을 사용할 수 있다.import { SvgIcon } from "@material-ui/core";export default () => ..

Material UI(MUI)는 Google의 Material Design을 구현하는 오픈소스 React UI 구성 라이브러리이다.현재 가장 많이 쓰이고 있는 React UI 컴포넌트 라이브러리 중에 하나이다. 패키지 설치Material UI는 core, system, utils, icons 등 여러 개의 패키지로 구성되어 있다.핵심적인 기능을 담고있는 @material-ui/core$ npm i @material-ui/core  - React 18과 Material-UI v4 호환 문제 : Material-UI v4는 React 18과 호환되지 않아, v5로 업그레이드$ npm install @mui/material @emotion/react @emotion/styled 폰트 불러오기Material U..