[React]Material-UI

はじめに

Material-UIは、文字通りUIに関するもので、Reactのフレームワークです。
今回は、Material-UIを使ってボタンを描画していきます。

英語のサイトですが、特に英語がわかる必要はありません。

■Material-UI
material-ui.com

■Material-UI Installation
material-ui.com

Material-UIの導入

今回は、Material-UIを使って、ボタンをカッコよくしてみます。

• HTMLのタグでボタンを導入した場合

<button>
  {'Normal button'}
</button>

■描画結果

normal-button

• Material-UIのコンポーネントでボタンを導入した場合

<Button variant="contained" color="primary">
  {'Material-UI button1'}
</Button>

■描画結果

material-ui-button1

colorの部分をsecondaryに変更することによって、色が変わります。
■描画結果

material-ui-button2

Button APIのPropsとCSSについては、以下を参考にしてください。
material-ui.com

■ソースコード

▶ソースコードを表示する。

/* React */
import React, { Component } from 'react'
import ReactDOM from 'react-dom'

/* Material-UI */
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
import Button from '@material-ui/core/Button'

class Buttons extends Component {

  render() {
    return (
      <div>
        <button>
          {'Normal button'}
        </button>

        {/* Material-UIを使う場合、MuiThemeProviderで囲ってください。 */}
        <MuiThemeProvider>
          <Button variant="contained" color="primary">
            {'Material-UI button1'}
          </Button>

          <Button variant="contained" color="secondary">
            {'Material-UI button'}
          </Button>
        </MuiThemeProvider>
      </div>
    )
  }
}

ReactDOM.render(
  <Buttons />,
  document.getElementById('app')
)

Githubにソースコードがあります。
GitHub - thomasJs8/react_samples: Sample codes are here.
∟03-material-ui.js

まとめ

簡単に見やすくてカッコよいUIができますね。
どのコンポーネントでも簡単に使えるため、是非活用したいと思います。