LoginSignup
18
17

More than 5 years have passed since last update.

Material-UI#v0.15.0

Posted at

地味にいろいろ変わっていて、ただアップデートしただけでは動かなくなったので調べつつ直しました。
英語読めないのに英文ドキュメントしかまだ見当たらなかったので、違うところあったらバンバン指摘お願いします。

テーマファイル

今まではテーマの変更は、公式ドキュメントを読むのを挫折するくらい面倒な手順が必要だったっぽいんですが、
v0.15.0になったことで、非常に簡単になりました。

その代わりデフォルトテーマでよくても最低限の手順が必要になったので、Get StartedのUsageにも記載がされました。

import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import MyAwesomeReactComponent from './MyAwesomeReactComponent';

const App = () => (
  <MuiThemeProvider muiTheme={getMuiTheme()}>
    <MyAwesomeReactComponent />
  </MuiThemeProvider>
);

MuiThemeProviderというラッパーオブジェクトと、実際のテーマファイルを参照するためのgetMuiTheme()が必要です。
これらを使い、全体を囲ってテーマファイルを注入します。

テーマを拡張する際は、getMuiTheme()を使って任意のパラメータを組み上げたり、

import {cyan500} from 'material-ui/styles/colors';

...

const muiTheme = getMuiTheme({
  palette: {
    textColor: cyan500,
  },
  appBar: {
    height: 50,
  },
});

...

<MuiThemeProvider muiTheme={muiTheme}>

既存のテーマファイルをimportして使用することもできます。

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

...

const darkMuiTheme = getMuiTheme(darkBaseTheme);

...

<MuiThemeProvider muiTheme={darkMuiTheme}>

コンポーネントパス

v0.14.4
import RaisedButton from 'material-ui/lib/raised-button';
v0.15.0
import RaisedButton from 'material-ui/RaisedButton';

ライブラリのディレクトリ構成が変わって、libが不要になり、
読み込むコンポーネント名と同じくキャメルケース記述になりました。

v0.14.4
import Table from 'material-ui/lib/table/table';
import TableHeaderColumn from 'material-ui/lib/table/table-header-column';
import TableRow from 'material-ui/lib/table/table-row';
import TableHeader from 'material-ui/lib/table/table-header';
import TableRowColumn from 'material-ui/lib/table/table-row-column';
import TableBody from 'material-ui/lib/table/table-body';
v0.15.0
import {Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowColumn} from 'material-ui/Table';

さらに、コンポーネント直下のindex.jsでexportsが記載されているので、上記のようにまとめてimportが可能になりました。

ふい〜。

拡張性向上のアップデートに見えますが、それに伴い一部記述を変更する必要があるのでやや面倒でした。

以上、現場から報告です!

18
17
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
18
17