本日の成果

"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 }

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

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

Nyadgets!

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

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

なので、

ThemeManager.setTheme(ThemeManager.types.LIGHT);

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

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

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