react material-ui のサンプル

reactとmaterial-uiのサンプル

チェックボックスを使いたくで、ドキュメントを見ながら配置してみた。

ドキュメントの内容：

import React from 'react';
import Checkbox from 'material-ui/Checkbox';
import ActionFavorite from 'material-ui/svg-icons/action/favorite';
import ActionFavoriteBorder from 'material-ui/svg-icons/action/favorite-border';
import Visibility from 'material-ui/svg-icons/action/visibility';
import VisibilityOff from 'material-ui/svg-icons/action/visibility-off';

const styles = {
  block: {
    maxWidth: 250,
  },
  checkbox: {
    marginBottom: 16,
  },
};

const CheckboxExampleSimple = () => (
  <div style={styles.block}>
    <Checkbox
      label="Simple"
      style={styles.checkbox}
    />
以下略

ふむふむ。なるほどね？っと上記を真似て配置したが、全然うまくいかず・・・

いろいろと探った結果、こんなルールがあった(気付きにくいよー涙)

App.js

import { browserHistory } from 'react-router';
import React, { Component } from 'react';
// MuiThemeProviderをimport
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

import './App.css';


class App extends Component {
  render() {
    return (
      // <MuiThemeProvider>でラッピング
      <MuiThemeProvider>
      <div>
        <main>
          <div>
               { this.props.children }
          </div>
        </main>
      </div>
      </MuiThemeProvider>
    );
  }
}

使う側のコンポーネント

import getMuiTheme from 'material-ui/styles/getMuiTheme';
import Checkbox from 'material-ui/Checkbox';

・・・・略
          <Checkbox
            id="rv_rhd_site"
            label=""
            value="1"
            // ↓をやらないとmuiがないよ！ってエラーが起きる。
            muiTheme={getMuiTheme("checkbox")}
            style={styles.checkbox}
            labelStyle={styles.label}
            defaultChecked={incident.rv_rhd_site==1?true:false}
          />
・・・略

へい！アメリカンぴーぽー！
ドキュメントの例は、もっと親切にしてYO!

英語よくわかんねーYO!

ちなみに

usageに書いてあります。

でも、サンプルにも書いてくれてもよくない・・・？

この記事でmaterial-ui使えたよ!!って人は「いいね！」宜しくですw