如何在 Gatsby 2.0 中使用 styled-components 主题

Question

正如标题所说，我很好奇将 styled-components 主题添加到 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 完成的旧示例进行操作，所以我想我应该知道布局是 not 自动添加到 v2 中的。唉，这样布局就可以了，但我只需要手动添加它：

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

...

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

Hmmph 令人沮丧的错误，但也许是我的问题。

如何在 Gatsby 2.0 中使用 styled-components 主题

How to use styled-components theme in Gatsby 2.0

reactjs

gatsby

styled-components