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>

Hmph令人沮丧的错误，但这也许是我的事。

如何在Gatsby 2.0中使用样式组件主题

1 个答案: