Works by

Ren's blog

@rennnosuke_rk 技術ブログです

【React】Material-UIでReactアプリケーションをマテリアルデザイン化する

Material-UI

material-ui.com

Material-UIはマテリアルデザインをReactアプリケーションに導入することができるUIコンポーネントです。Material-UIを使うことで、手軽にGoogleマテリアルデザインを踏襲したアプリケーションを作ることができます。

Install

例によってnpmでインストールします。

$ npm install @material-ui/core
# 他のUIコンポーネントも一括でインストールしたい場合
$ npm install @material-ui/core

ついでにReactのアプリも作ってしまいます。
create-react-appのインストールについてはこちら。

$ create-react-app material-react-app
$ cd material-react-app

Usage

f:id:rennnosukesann:20180522000854p:plain

とりあえずAppBarCardButtonを使ったレイアウトを簡単に作ってみました。

既存のApp.jsを編集します。

src/App.js
import React, { Component } from 'react';
import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Card from '@material-ui/core/Card';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';

const styles = {
  card: {
    margin: 48,
    height: 128
  },
};

class App extends Component {
  render() {

    const classes = this.props.classes;
    console.log(classes);

    return (
      <div>

        <AppBar position="static" color="default">
          <Toolbar>
            <Typography variant="title" color="inherit">
              AppBar
            </Typography>
          </Toolbar>
        </AppBar>

        <Card className={classes.card}>
          <CardContent>
            Hello, Material-UI in React :)
          </CardContent>
          <CardActions>
            <Button >Cancel</Button>
            <Button variant="raised" color="primary">OK</Button>
          </CardActions>
        </Card>

      </div>
     );
  }
}

export default withStyles(styles)(App);

軽く説明

import
import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Card from '@material-ui/core/Card';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';

使用するUIコンポーネントは片っ端からimportします。
withStylesCSSによる要素のスタイリングに使います。

AppBar

f:id:rennnosukesann:20180522001426p:plain

        <AppBar position="static" color="default">
          <Toolbar>
            <Typography variant="title" color="inherit">
              AppBar
            </Typography>
          </Toolbar>
        </AppBar>

AppBar(一番上のバー)です。タイトルを表示したり、トップメニューを入れたりできます。基本ToolBar入れ子にして、その中に文字列やアイコンを配置していくようです。

Card&Button
        <Card className={classes.card}>
          <CardContent>
            Hello, Material-UI in React :)
          </CardContent>
          <CardActions>
            <Button >Cancel</Button>
            <Button variant="raised" color="primary">OK</Button>
          </CardActions>
        </Card>

コンテンツの一単位としてよく使われるカード。
CardContentでカードコンテンツの領域を、CardActionsでボタンなどアクションを要するコンポーネントの領域を確保します。

            <Button >Cancel</Button>
            <Button variant="raised" color="primary">OK</Button>

Buttonの配置はこれだけでOK。オプションによって様々な種類 のボタンを選べます。

f:id:rennnosukesann:20180522002227p:plainf:id:rennnosukesann:20180522002233p:plainf:id:rennnosukesann:20180522002238p:plain

FloatingActionButton

FloatingActionButtonもちゃんと用意してあるみたいです。

f:id:rennnosukesann:20180522003116p:plain

中のアイコンは別途インストールします。

$ npm install @material-ui/icons
import React, { Component } from 'react';
import Button from '@material-ui/core/Button';
import AddIcon from '@material-ui/icons/Add';
import Icon from '@material-ui/core/Icon';
import DeleteIcon from '@material-ui/icons/Delete';


class App extends Component {
  render() {

    return (
      <div>

        <div>
          <Button variant="fab" color="primary" aria-label="add">
            <AddIcon />
          </Button>
          <Button variant="fab" disabled aria-label="delete">
            <DeleteIcon />
          </Button>
        </div>

      </div>
     );
  }
}

export default App;

ほかにも様々なUIコンポーネントが用意されているので、色々試してみたいと思います。

参考

material-ui.com