Material-UIのテーマカラーを変更する(STEP 4 : Material-UIの導入 - React + Redux + Firebase チュートリアル)

★前回の記事

yucatio.hatenablog.com

現在はデフォルトのテーマカラーを使用していますが、これを自分の好きな色に変えます。

f:id:yucatio:20181216135813p:plain

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

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

f:id:yucatio:20181122231844p:plain

カスタマイズしたテーマ用のファイルを作成します。

src/materialui/theme.js(新規作成)

import {createMuiTheme} from '@material-ui/core/styles'
        
export const theme = createMuiTheme({  // #1
  palette: {
    primary: {
      light: '#ffff8b',
      main: '#ffee58',
      dark: '#c9bc1f',
      contrastText: '#000000',
    },
    secondary: {
      light: '#63a4ff',
      main: '#1976d2',
      dark: '#004ba0',
      contrastText: '#ffffff',
    },
  },
})

createMuiThemeにテーマカラーを渡すことでデフォルトの設定を上書きしています(#1)。

作成したテーマをコンポーネントに渡します。<App>を<MuiThemeProvider>で囲うことでカスタマイズしたテーマを使用することができます。

src/index.js

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

// 略

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