Gatsby.jsのプロジェクトでMaterialUiのテーマを使用する

Gatsby CLI version: 4.8.1
Node version: v16.14.0

パッケージを入れる

yarn add @material-ui/core @material-ui/icons
yarn add gatsby-plugin-material-ui@next @emotion/react

gatsby-config.jsのプラグイン欄に追加

plugins: ['gatsby-plugin-material-ui']

テーマを反映させたいときは、layout.jsにThemeProviderを入れるのではなく、componentsの中にmui-theme-provider.jsというファイルを作り、中身は

import { createTheme, CssBaseline } from '@material-ui/core'
import { ThemeProvider } from '@material-ui/styles'
import React from 'react'

const MuiThemeProvider = ({ children }) => { 
  const theme = createTheme({ 
    palette: { type: 'dark' }, 
  });

  return ( 
    <ThemeProvider theme={theme}> <CssBaseline /> {children} </ThemeProvider> 
  );
}

export default MuiThemeProvider

として、gatsby-browser.jsを

// custom typefaces
import "typeface-montserrat"
import "typeface-merriweather"
// normalize CSS across browsers
import "./src/normalize.css"
// custom CSS styles
import "./src/style.css"
// Highlighting for code blocks
import "prismjs/themes/prism.css"

import React from 'react'
import MuiThemeProvider from './src/components/mui-theme-provider'

export const wrapRootElement = ({ element }) => { 
  return <MuiThemeProvider>{element}</MuiThemeProvider>
}

これでmui-theme-provider.jsで設定した内容が反映されるようになる。以下はpalette: { type: 'dark' }が反映されている。

参考：Material-UIを使ってGatsbyの見た目を整える