Material-UI는 머티리얼 디자인을 React 애플리케이션에 도입할 수 있는 UI 컴포넌트입니다. Material-UI를 사용하면 간편하게 Google의 머티리얼 디자인을 도입할 수 있습니다.

설치

먼저 Yarn에서 다음을 설치하십시오.

$ yarn add @material-ui/core
$ yarn add @material-ui/icons #アイコン用

사용해보기

이제 material-ui를 사용할 수 있게 되었습니다.
다음으로, material-ui의 공식 사이트 (https://material-ui.com)으로 이동합니다.
사이드 메뉴의 구성 요소에서 원하는 구성 요소를 선택합니다.
이번에는 Inputs의 Button을 선택해 보겠습니다.
그러면 다음과 같이 몇 가지 Button과 소스 코드가 표시됩니다.


좋아하는 UI 소스 코드를 Rails의 React 컴포넌트에 붙여넣으면 머티리얼 컴포넌트를 쉽게 사용할 수 있습니다.
그러면 react-rails로 임의의 컴포넌트를 작성하고, 작성한 컴퍼넌트를 다음과 같이 변경해 주세요.

import React from "react"
import PropTypes from "prop-types"
import Button from '@material-ui/core/Button'; 

class MaterialComponentList extends React.Component {
  render () {
    return (
      <React.Fragment>
      <Button variant="contained" color="primary">
          Primary
        </Button>
      </React.Fragment>
    );
  }
}

export default MaterialComponentList

이번에는 Button 구성 요소를 사용했으므로 Rails의 node_modules/@material-ui/core/Button을 가져옵니다.
이제 reactcomponent의 잘 나오는 화면에 액세스하면 material-ui의 Button이 표시되어 있을 것입니다.