gatsbyでMaterial UIのthemeのcolorを変更する（primary,secondary,background※surface）

4780 ワード
gatsby React material-ui デザイナー向け React テキストリンク

gatsby-browser.js と gatsby-ssr.js とに

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

して、
<ThemeProvider theme={theme}>でつつんであげると良い感じになります。

※メモ：
gatsby-browser.js と gatsby-ssr.js は、
gatsbyさん的には「中身を同じにしてね」というファイルだそう。
（ssrはサーバサイドレンダリングしてくれるファイルだそう。）

例えば下記のような形です。

import { CssBaseline } from '@material-ui/core'
import React from 'react'
import { RecoilRoot } from 'recoil'

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

const theme = createMuiTheme({
  palette: {
    primary: {
      main: '#EF2D29',
    },
    secondary: {
      main: '#00A7C1',
    },
    background: {
      default: '#fff',
    },
  },
})

export const wrapRootElement = ({ element }) => {
  return (
    <RecoilRoot>
      <ThemeProvider theme={theme}>
        <CssBaseline />
        {element}
      </ThemeProvider>
    </RecoilRoot>
  )
}

参考：
https://material-ui.com/customization/default-theme/#default-theme

ここからいじりたい値を参照してみよう！