[ Material UI ] 사용법 간단 정리

install

npm i @material-ui/core
// core 외에 system, utils, icons도 존재한다.

styled-components와 함께 쓰기 위한 준비

styled-components를 설치

npm i styled-components

StylesProvider로 App 감싸기

// index.js

import {StylesProvider} from "@material-ui/core";

ReactDOM.render(
  <React.StrictMode>
      <StylesProvider injectFirst>
        <App />
      </StylesProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

Material-UI의 컴포넌트 및 속성

layout 관련

Box 컴포넌트

• 일반적인 박스 ?

Container 컴포넌트

• 자식 요소를 수평 중앙정렬하는 박스. fluid(defualt)와 fixed로 나뉘는 듯
• fluid는 maxWidth 속성값으로 최대 크기 설정해두고 사용.
  • maxWidth 단위 : lg, md, sm, xl, xs, false 참고
• fixed : Container 컴포넌트에 해당 속성 추가

Text 관련

• 참고

• 보통 p, h1, h2 등으로 텍스트 정보를 렌더하겠지만 Material UI에서는 모든 텍스트는 \ 컴포넌트를 사용해서 표현한다

props

• variant : 텍스트의 크기 지정

  • h1, h2, h3 .. body1, body2.. 이에 맞는 html 태그로 지정되기도 하는데, 크기와 별도로 다른 태그로 생성하고 싶다면 component 속성에 원하는 태그값을 넣는다

    <Typography component="h1" variant="h4">Sample</Typography>
    // 크기는 h4인 h1 태그가 생성됨

• color : 글자색 지정. primary, secondary, textPrimary, textScondary ..

• align : 수평 정렬. left, center, right

Icon 관련

install

npm i @material-ui/icons

사용할 아이콘 찾기

• Material-ui Icon

//예시
import EcoIcon from "@material-ui/icon/Eco

props

• color : 아이콘 색상
• fontSize : 아이콘 크기

Button 관련

props

• variant : 버튼 형태

  • contained(배경색), outlined(테두리), text.

• color : variant에 맞는 요소에 색상 지정

  • default, primary, secondary, disabled, link ..

• disableElevation : 기본 그림자(돌출효과) 삭제

• disableRipple : 버튼 클릭시 파동 효과 삭제

• size : 버튼 크기.

  • small, medium, large

• startIcon, endIcon : 텍스트의 좌, 우에 아이콘을 넣고 싶을 때 해당 속성에 아이콘 컴포넌트 전달

• 텍스트가 없는 순수 아이콘 버튼은 Button대신 IconButton 사용

// 텍스트 o
<Button startIcon={<Icon/>}>Icon</Button>

// 텍스트 x
<IconButton>
	<Icon/>
</IconButton>

TextField

• form 양식의 input, select, textarea등
• TextField는 Material UI의 다른 컴포넌트인 InputLabel, Input, FormHelperText 등으로 구성된 고수준 컴포넌트임
• standard, filled(배경색), outlined(테두리) 3가지 형태로 제공된다.

참고

https://www.daleseo.com/?tag=MaterialUI