テンプレートを作っておくと何かと楽なので、メモを含めて作成

Gatsby のプロジェクト作成

npm init gatsby

パッケージをインストール

yarn add @chakra-ui/gatsby-plugin @chakra-ui/react @emotion/react @emotion/styled framer-motion

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

// gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: "@chakra-ui/gatsby-plugin",
      options: {
        resetCSS: true,
        isUsingColorMode: true,
      },
    },
  ],
}

theme.js を作成

// src/@chakra-ui/gatsby-plugin/theme.js
import { extendTheme } from '@chakra-ui/react'

// componentのスタイルをカスタムする
const Container = {
  baseStyle: {
    maxW: { base: 'calc(100vw - 40px)', lg: '60vw' },
  },
}

const theme = {
  components: {
    Container,
    Text: {
      baseStyle: {
        lineHeight: 2,
        fontWeight: 700,
        letterSpacing: '2px',
      },
    },
    GridItem: {
      baseStyle: {
        letterSpacing: '4px',
      },
    },
  },
  colors: {
    primary: '#F01',
    dark: '#000',
  },
  fonts: {
    heading: 'futura-pt, sans-serif',
    body: 'source-han-sans-japanese, "Noto Sans JP"',
  },
  textStyles: {
    en: {
      fontFamily: 'futura-pt',
    },
    italic: {
      fontFamily: 'Dancing Script',
    },
  },
}

export default extendTheme(theme)

Provider コンポーネントを作成

// src/@chakra-ui/gatsby-plugin/Provider.js

import { ChakraProvider } from '@chakra-ui/react'
import React from 'react'
import theme from './theme'

const ThemeProvider = (props) => {
  return (
    <ChakraProvider
      theme={theme}
      resetCSS={props.resetCSS || true}
      portalZIndex={props.portalZIndex || 40}
    >
      {props.element}
    </ChakraProvider>
  )
}

export default ThemeProvider

wrapper.js component を作成して、gatsby-ssr.js と gatsby-browser.js を作成

// src/wrapper.js

import React from 'react'
import ThemeProvider from './@chakra-ui/gatsby-plugin/Provider'
import Layout from './components/layout'
import './styles/global.css'

export const wrapPageElement = ({ element, props }) => {
  return <Layout {...props}>{element}</Layout>
}

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

// gatsby-browser.js
import { wrapPageElement as wrap } from './src/wrapper'

export const wrapPageElement = wrap

// gatsby-ssr.js
import { wrapPageElement as wrap } from './src/wrapper'

export const wrapPageElement = wrap

github リポジトリ

https://github.com/chibataku0815/gatsby-chakra-ui-example01