正式リリースされたMaterial-UI v1でThemeを変更したいんだがよろしいか？

つい先日、今までbeta版だったMaterial-UI v1が正式リリースされました！
おめでとうございます！

今までのv0系統のMaterial-UIにはベースのテーマをlightかdarkにするかやprimaryやsecondaryの色をデフォルトから変更する機能がありました。
v1系統のMaterial-UIにも同じ機能が存在します。

テーマの設定

Material-UIのcolorsを使用した例

もっともお手軽なのはMaterial-UIが用意しているColorPaletteを使用することです。

theme.js

import { createMuiTheme } from '@material-ui/core/styles';
import blue from '@material-ui/core/colors/blue';
import yellow from '@material-ui/core/colors/yellow';

export const theme = createMuiTheme({
  palette: {
    type: 'dark', // ベースのテーマ lightかdarkか
    primary: blue, // primaryのカラー
    secondary: yellow, // secondaryのカラー
  },
});

個別の設定

自分で細かく設定することもできます

theme.js

import { createMuiTheme } from '@material-ui/core/styles';

const theme = createMuiTheme({
  type: 'light'
  palette: {
    primary: {
      light: '#757ce8', // 基本の色よりも明るい色
      main: '#3f50b5', // 基本の色
      dark: '#002884', // 基本の色よりも暗い色
      contrastText: '#fff', // テキストの色
    },
    secondary: {
      light: '#ff7961',
      main: '#f44336',
      dark: '#ba000d',
      contrastText: '#000',
    },
  },
});

テーマの反映

ではいよいよ自分で作成したお気に入りのテーマ反映させましょう！

app.jsx

// node_modules
import React from 'react';
import { MuiThemeProvider } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';

// 自分で用意したTheme
// ファイルパスは私の環境のものです。
import { theme } from '../../assets/theme';

class App extends React.Component {
  render() {
    return (
      <MuiThemeProvider theme={theme} > {/* <- ここが大事*/}
        <AppBar color="primary">
          <Toolbar>
            <Typography variant="title" color="inherit">
              Material-UI
            </Typography>
          </Toolbar>
        </AppBar>
      </MuiThemeProvider>
    );
  }
}

これで上手く変更されたはずです。
チェックボックスの色もsecondaryの色に変更されます。
地味に嬉しいですよね（笑）

色を自由に設定できるとはいえ、マテリアルデザインには色の使い方にもルールが存在します。
なので、最後にイケてるマテリアルデザインにしてあげるにはライブラリ使用者の技量が問われます。
なので、そこは意識を持っておきましょう。

それと上の例のようにThemeの設定もそれ用のファイルを作って書いた方が管理しやすいでしょう。

最後に

お前の説明よりも本家の方を見たいんだが？
という人のために本家の方のThemeカスタマイズのドキュメントへのリンクも置いておきます。

皆さんもLet'sマテリアルデザイン！！