Как использовать тему стилевых компонентов в Gatsby 2.0

Question

так как в заголовке написано, что мне любопытно, какова лучшая практика добавления темы с элементами стиля на сайт Gatsby?Я искал в интернете, не найдя определенного ответа, но из того, что я собрал, я, вероятно, должен сделать это, создав макет в src/layouts/index.tsx, который обернет все страницы с помощью ThemeProvider:

import * as React from 'react'
import { ThemeProvider } from 'styled-components'

import { defaultTheme } from '../theme/defaultTheme'

export const DefaultLayout = ({ children }) => (
  <ThemeProvider theme={defaultTheme}>
    { children }
  </ThemeProvider>
)

И тогда я смогу свободно использовать тему в моих стилизованных компонентах?Что не работает, и я немного расстроен этим.

Answer 1

Хорошо, решение было простым.Поскольку я следовал старым примерам, сделанным с v1, думаю, я должен был знать, что макеты не автоматически добавляются в v2.Вздохните, чтобы компоновка работала, но мне просто нужно добавить ее вручную:

import { DefaultLayout } from '../layouts/DefaultLayout'

...

  <DefaultLayout>
    <div>
      <h1>Front page</h1>
      <Button>I am a button</Button>
    </div>
  </DefaultLayout>

Хм, расстраивающая ошибка, но, возможно, это было на мне.