cannot provide theme prop using themeprovider in styled-components with gatsby-plugin-layout

[djm158]

I appear to be having a similar issue to #11427. No matter if I add the <ThemeProvider> to gatsby-ssr.js, gatsby-browser.js, or my layout.js component, I cannot access my provided theme. Link to reproduction https://github.com/djm158/danielmcgrath.xyz/tree/v2.

Gist is the following:

Have a theme.js:

const theme = {
  breakpoints: ["576px", "768px", "992px", "1200px", "1800px"],
  defaultWidths: [1, 1, 1, 7 / 8, 3 / 4, 1 / 2],
  blue: "40B6FF"
};

export default theme;

I used styled-components theme-provider in layout.js

const Layout = ({ children }) => (
  <StaticQuery
    query={graphql`
      query SiteTitleQuery {
        site {
          siteMetadata {
            title
          }
        }
      }
    `}
    render={() => (
      <>
        <Menu />
        <ThemeProvider theme={theme}>
          <PageWrapper>
            <SideBar />
            <MainWrapper>
              <Main>
                <MainContent>{children}</MainContent>
              </Main>
            </MainWrapper>
          </PageWrapper>
        </ThemeProvider>
      </>
    )}
  />
);

try to use said theme:

const IndexPage = props => {
  console.log(props); // no theme :(
  return (
    <>
      <SEO
        title="Daniel McGrath | Portfolio"
        keywords={[`developer`, `software`, `engineer`]}
      />
		...

but no dice. have also tried the suggestions in the linked issue, i.e.

// gatsby-ssr.js
import React from 'react';
import { ThemeProvider } from 'styled-components';
import theme from "./src/theme";

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

Apologies if this is a duplicate. This appears related to the linked issue but possibly different as I am using gatsby-plugin-layout

System:
OS: Windows 10
CPU: (4) x64 Intel(R) Core(TM) i5-4690K CPU @ 3.50GHz
Binaries:
Yarn: 1.15.2 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.9.0 - C:\Program Files\nodejs\npm.CMD
Languages:
Python: 3.6.4 - /c/python36/python
Browsers:
Edge: 44.17763.1.0
npmPackages:
gatsby: ^2.2.11 => 2.3.4
gatsby-image: ^2.0.34 => 2.0.35
gatsby-plugin-layout: ^1.0.13 => 1.0.14
gatsby-plugin-manifest: ^2.0.24 => 2.0.26
gatsby-plugin-offline: ^2.0.25 => 2.0.25
gatsby-plugin-react-helmet: ^3.0.11 => 3.0.11
gatsby-plugin-sharp: ^2.0.31 => 2.0.32
gatsby-plugin-styled-components: ^3.0.7 => 3.0.7
gatsby-plugin-typography: ^2.2.10 => 2.2.10
gatsby-remark-prismjs: ^3.2.6 => 3.2.6
gatsby-source-filesystem: ^2.0.28 => 2.0.28
gatsby-transformer-remark: ^2.3.8 => 2.3.8
gatsby-transformer-sharp: ^2.1.17 => 2.1.17

[pieh]

Hey @djm158 - reading the styled-components docs I found you need to use withTheme higher order component to get access to theme prop ( https://www.styled-components.com/docs/advanced#getting-the-theme-without-styled-components ) - i.e. like this djm158/danielmcgrath.xyz#4 - after that I get the access to theme prop.