本日の成果

"use strict";

import React from "react";
import MUI from "material-ui";

let ThemeManager = MUI.Styles.ThemeManager();
let Colors = MUI.Styles.Colors;

ThemeManager.setTheme(ThemeManager.types.LIGHT);

let { AppCanvas, AppBar } = MUI;

class Application extends React.Component {
  getChildContext() {
    return { muiTheme: ThemeManager.getCurrentTheme() };
  }

  componentWillMount() {
    ThemeManager.setPalette({
      accent1Color: Colors.deepOrange500,
    });
  }

  render() {
    return (
      <AppCanvas>
        <AppBar title="Neriume" />
      </AppCanvas>
    );
  }
}

Application.childContextTypes = {
  muiTheme: React.PropTypes.object,
};

export { Application };

---

Material UI - Material Design React Components

を取り敢えず動かすためのコードです。はい。

---

まあ、元にしたというか参考にしたコードは以前、

• Nyadgets!

を React + material-ui 仕様にしようと思って、結局は採用しなかったヤツなんだけど、 今日久しぶりに material-ui を触っていて、なんか良く判らんエラーが出て動かねーとなっていたので、 とりあえずシンプルに動かせたコードを貼っておく次第。

ちなみにポイントは ThemeManager 周りのコードで、恐らく、 material-ui はデフォルトの theme をコンポーネントとか使う前に設定しておかないと動かないっぽい(？) みたい。

なので、

ThemeManager.setTheme(ThemeManager.types.LIGHT);

という一行がそれなにに重要に成るので、その辺りは注意した方がよさげ。

---

ということで今回は以上。結構雑に書いてるので、判らんことがあったらコメント欄で質問などお願いします。 あと僕自身もこの辺り完全に判り切っているワケではないので、まあ質問に答えられなかったらすまんこ。

というワケで終わります。はい。