import React from 'react';
import ReactDOM from 'react-dom';
import ‘./index.css';

// （1）モジュールのインポート
import MuiThemeProvider from ‘material-ui/styles/MuiThemeProvider';
import Avatar from 'material-ui/Avatar';
import Chip from 'material-ui/Chip';
import injectTapEventPlugin from 'react-tap-event-plugin';

// （2）タッチイベントに必要なコード
//    http://stackoverflow.com/a/34015469/988941
injectTapEventPlugin();

const styles = {
  chip: {
    margin: 5,
  },
  wrapper: {
    display: 'flex',
    flexWrap: 'wrap',
  },
};

// （3）タップイベントのハンドラ
function handleTouchDelete() {
  alert('削除ボタンが押されました');
}

function handleTouchTap() {
  alert('チップが選択されました。');
}

// （4）Material-UIのコンポーネントの宣言
class MyChipSmaple extends React.Component {
  render() {
    return (
        <MuiThemeProvider>
      <div style={styles.wrapper}>
        <Chip
          onRequestDelete={handleTouchDelete}
          onTouchTap={handleTouchTap}
          style={styles.chip} >
          <Avatar size={32}>TS</Avatar>
          Taro Sakurai
        </Chip>

    [繰り返しのため省略]

        </MuiThemeProvider>
    );
  }
}

ReactDOM.render(
  <MyChipSmaple />,
  document.getElementById('root')
);

import darkBaseTheme from 'material-ui/styles/baseThemes/darkBaseTheme';
import getMuiTheme from 'material-ui/styles/getMuiTheme';

class MyButton extends React.Component {
  render() {
    return(
      <MuiThemeProvider muiTheme={getMuiTheme(darkBaseTheme)}>
        <RaisedButton label="MyButton" />
      </MuiThemeProvider>
    );
  }
}

// カスタマイズしたい項目の設定
const muiTheme = getMuiTheme({
  palette: {
    primary1Color: blue500,
  },
  RaisedButton: {
    width: 80,
  },
});

// PropsとしてmuiThemeオブジェクトを設定
const Main = () => (
  <MuiThemeProvider muiTheme={muiTheme}>
    <RaisedButton label="My Button” />
  </MuiThemeProvider>
);