Gatsby: Using styled-components with ThemeProvider

[cschroeter]

I would like to use a ThemeProvider provided by styled-components. This works just fine if I wrap each page with

export default () => (
<ThemeProvider theme={theme}>
  <Text>Hello World</Text>
</ThemeProvider>
);

This is kinda verbose, cause every page needs to do this. Is there any kind of base page or a similar concept? In vanilla ReactJS I would just wrap the Root component?

What am I missing here?

[alampros]

You could use either src/layouts/index.js or the root src/html.js to wrap the lower lever components.

[cschroeter]

Thanks, that worked. In case anyone is interested:

```js
// src/layouts/index.js
const Layout = ({ children }) => (
{children()}

);

export default Layout;