설치

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

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

SVG ICON 설치

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

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

• 이와 같은 이미지를 간단하게 가져다가 쓸 수 있음

<HomeIcon />
<HomeIcon color="primary" />
<HomeIcon color="secondary" />
<HomeIcon color="action" />
<HomeIcon color="disabled" />
<HomeIcon style={{ color: green[500] }} />

• 공식 홈페이지를 둘러보면서 느낀 점
  • 다양한 React 컴포넌트를 제공한다.
  • 가져다 쓰기 좋은 UI가 많다.
  • Progress bar도 제공..
  • 모달도 제공.. ㅎㄷㄷ

커스터마이징

• 일회성 상황에 대한 특정 변형

const StyledButton = withStyles({
  root: {
    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
    borderRadius: 3,
    border: 0,
    color: 'white',
    height: 48,
    padding: '0 30px',
    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
  },
  label: {
    textTransform: 'capitalize',
  },
})(Button);

<StyledButton> classes shorthand </StyledButton>

• 색깔에 대한 정의