Material-UIでprimaryとsecondaryの色を変更する

Material-UIのprimaryとsecondaryの色の変え方がわからなかったのでメモ。

デフォルトの色

デフォルトでは、primaryはindigo, secondaryはpinkです。

f:id:yucatio:20181122230807p:plain

primaryとsecondaryの色を変更する

primaryとsecondaryの色を自分の好きな色に変えていきます。

１. 色を決める

今回はマテリアルデザインチームのカラーツールを使用します。

material.io

primaryとsecondaryの色を選択します。選択すると左側の画面にすぐに反映されるので、適用イメージを確かめならが選べます。選択した色のカラーコードが右下に表示されます。

f:id:yucatio:20181122231844p:plain

２. createMuiThemeでテーマを作成する

ファイルを新規作成して色を記述します。paletteにカラーツールに表示されているカラーコードをコピーします。

createMuiTheme()で新しいテーマを作成しています。

src/materialui/theme.js

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

export const theme = createMuiTheme({
  palette: {
    primary: {
      light: '#ffff8b',
      main: '#ffee58',
      dark: '#c9bc1f',
      contrastText: '#000000',
    },
    secondary: {
      light: '#63a4ff',
      main: '#1976d2',
      dark: '#004ba0',
      contrastText: '#ffffff',
    },
  },
})

３. MuiThemeProviderでテーマを適用する

上記で作成したテーマを適用します。Reactツリーのルート要素を<MuiThemeProvider>で囲みます。

src/index.js

// 前略
import {MuiThemeProvider} from '@material-ui/core/styles'
import {theme} from './materialui/theme'

const store = createStore(todoApp)

render (
  <MuiThemeProvider theme={theme}>
    <Provider store={store}>
      <App />
    </Provider>
  </MuiThemeProvider>,
  document.getElementById('root')
)