Material-UIでラクにリッチなマテリアルデザインのReactコンポーネントをつくる

※ 追記: この記事で使用しているMaterial-UIのバージョンはv0.20.0と、執筆当時から比べてかなり古くなってしまいました。これから始める方は最新のドキュメントを参照してください。

Material-UI

  • この記事で使用しているMaterial-UIのバージョンはv.0.20.0です。
  • サンプルのソースコードにはTypeScriptを使用しています。

🌱Material-UIとは

Material-UIとは Googleのデザインガイドラインであるマテリアルデザイン に従って実装されたReact Component群を多数提供しているライブラリーです。

Material-UI Logo

マテリアルデザインのフォーム部品やローディング用のスピナーのアニメーションなど細部のツヤにまでこだわってCSSやJavaScriptで実装することはなかなか時間がかかり、骨が折れます。 また、IE 11など、ときとして挙動が悩みのタネとなるレガシーブラウザの存在もあります。

それらをサポートしつつ、手早くリッチなUIアニメーションを提供してくれる Material-UIの存在はReactユーザーにとって非常に助けになると思います。

Material-UIは非常に多くのコンポーネントを提供しています。 メジャーなコンポーネントをちらっと見ただけでも、こんなにあります。(一部抜粋)

参照: Material-UIがサポートしているコンポーネント

  • Button
  • Dropdown
  • Toolbar
  • Cards
  • Data tables
  • Dialogs
  • Menu
  • Date picker
  • Loading
  • Checkbox
  • Radio button
  • Switch
  • Sliders
  • List
  • Tabs
  • Text fields

この記事では流石に全部を紹介できないので、Material-UIが提供するコンポーネントの一部を抜粋して、紹介します。

この記事で使用しているMaterial-UIのバージョンは v.0.20.0です。

🦀Material-UIをインストール

いつも通り npm モジュールとしてインストールします。

yarn install material-ui 
yarn install -D @types/material-ui

🐪MuiThemeProviderでReactアプリをラップする

まずはじめにやることはTheme(テーマ)の設定です。MUIThemeProviderでReactコンポーネントをラップすることにより、Provider以下で定義されるMaterial-UIにThemeを適用することができます。 ここではlightBaseThemeを適用していますが、他にも黒を基調としたdarkBaseThemeなどのThemeも提供されています。

import React from 'react'
import ReactDOM from 'react-dom'
import {MuiThemeProvider, getMuiTheme, lightBaseTheme} from 'material-ui/styles'

...

ReactDOM.render(
    <MuiThemeProvider muiTheme={getMuiTheme(lightBaseTheme)}>
        <MyReactComponent />
    </MuiThemeProvider>
    ,
    document.querySelector('#root')
);

⏺いろいろなボタンコンポーネント

Material-UIのボタンコンポーネントを使ってみましょう。 こんな感じのUIになります。

指定されたPropsを渡すことで、スタイルをいろいろカスタマイズすることができます。

import React from 'react';
import { IconButton, FlatButton, RaisedButton, FloatingActionButton} from 'material-ui';

const BtnsComponent = () => (
    <ul>
        <li>
            <h2>FlatButton</h2>
            <FlatButton label="Default"/>
            <FlatButton label="Primary" primary={true}/>
            <FlatButton label="Secondary" secondary={true}/>
            <FlatButton label="Disabled" disabled={true}/>
        </li>
        <li>
            <h2>RaisedButton</h2>
            <RaisedButton label="Default" style={{margin: '0 10px'}}/>
            <RaisedButton label="Primary" primary={true} style={{margin: '0 10px'}}/>
            <RaisedButton label="Secondary" secondary={true} style={{margin: '0 10px'}}/>
            <RaisedButton label="Disabled" disabled={true} style={{margin: '0 10px'}}/>
        </li>
        <li>
            <h2>Floating Action Button</h2>
            <FloatingActionButton style={{margin: '0 10px'}}>
                <i className="material-icons">add</i>
            </FloatingActionButton>
            <FloatingActionButton mini={true} style={{margin: '0 10px'}}>
                <i className="material-icons">add</i>
            </FloatingActionButton>
            <FloatingActionButton secondary={true} style={{margin: '0 10px'}}>
                <i className="material-icons">add</i>
            </FloatingActionButton>
        </li>
        <li>
            <h2>Icon Button</h2>
            <IconButton>
                <i className="material-icons">star rate</i>
            </IconButton>
            <IconButton disabled color="primary">
                <i className="material-icons">delete</i>
            </IconButton>
        </li>
    </ul>
);

export default BtnsComponent;

⭕Circular Progress

import React from 'react';
import CircularProgress from 'material-ui/CircularProgress';

const Progresses = () => (
    <div>
        <h2>Circular Progress</h2>
        <CircularProgress />
        <CircularProgress size={60} thickness={10} color={"#FF5722"} />
        <CircularProgress size={80} thickness={12} color={"#E91E63"} />
        <CircularProgress size={100} thickness={14} color={"#3F51B5"} />
        <CircularProgress size={120} thickness={20} color={"#009688"} />
    </div>
);

export default Progresse

📝TextField

🗓Datepicker

参照リンク

いくつか紹介しましたが、本家のドキュメントにはまだまだ提供されているコンポーネントがたくさんあります。 気になったら、ぜひ覗いてみてください。

本家ドキュメント

手っ取り早く動かすためのサンプルをこちらに置いておきます。

サンプル

サンプルの動かし方

# yarn 
# npm run start
# public以下のhtmlファイルをブラウザで開く
  • このエントリーをはてなブックマークに追加