gatsby（react）でMaterial-UIのthemeにcustom colorを足す（色を追加する）

reactのMaterial-UIのthemeにカラーを追加する方法についてのメモです。

gatsby-browser.jsとgatsby-ssr.js

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

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

//ここから3つをimport
//{ ThemeProvider }と{ MuiThemeProvider }が
//いい感じにMaterial UIでもthemeをいい感じにカスタムできるようにしてくれる
import { ThemeProvider } from 'styled-components'
import { MuiThemeProvider } from '@material-ui/core/styles'
import { theme } from './src/utility/theme'

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

これでthemeに設定した色が使えるようになります。

theme.js

下記のような形で、カスタムカラーを追加することが可能です。
ここではgrayfill: '#fff000'を追加しました。

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

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

利用

例えば、
Material Iconを grayfillで塗りたい時

//色々必要なやつはimport（省略）
//使いたいアイコンをインポート
import PersonIcon from '@material-ui/icons/Person'

//propsでthemeに追加したカラーを渡す
const PersonGrayIcon = styled(PersonIcon)`
  color: ${props => props.theme.palette.grayfill};
`

const SearchPage = () => {
  return (
   <PersonGrayIcon />
  )
}

export default SearchPage