Reactjs 盖茨比&x2B；ThemeProvider样式组件的主题为空

我第一次尝试盖茨比。我设置了我的本地dev env，就像在没有Gatsby的情况下一样，使用

从根组件包装应用程序。它工作得很好…直到我尝试运行命令，使我的应用程序为生产和服务做好准备。

gatsby build

。然后我得到一个错误：

WebPackageError:TypeError:无法读取未定义的属性“blue1”

在进一步阅读之后，我被告知使用

gatsby ssr.js

和

gatsby browser.js

文件以及

wraprotement（）

API。这现在在本地失败，错误与我尝试运行上面的生产构建脚本时相同

为什么我的ThemeProvider道具还是空的？我不应该在布局中包装每个组件

---

• package.json

---

然后通过

gatsby config

准备好的文件：

• gatsby-ssr.js
• gatsby-browser.js

---

• gatbsy-config.js

---

• root-wrapper.js

export const wraprootement:FC=（{element}）=>{
返回(
{element}
);
};

---

• src/components/Layout.tsx

const布局：FC=（{children}）=>{
返回(
...
{儿童}
);
};

---

• src/pages/index.tsx

导出默认值（道具：任意）=>；

因此，当我在

全局

或

主

组件中放置调试器时，主题是一个空的obj

{}

---

地方发展如何使主题变得空洞

我也有这个问题：'（我也有这个问题：'(

"dependencies": {
    "babel-plugin-styled-components": "^1.10.6",
    "gatsby": "^2.17.4",
    "gatsby-plugin-react-helmet": "^3.1.15",
    "gatsby-plugin-styled-components": "^3.1.11",
    "react": "^16.11.0",
    "react-dom": "^16.11.0",
    "react-helmet": "^5.2.1",
    "react-inlinesvg": "^1.2.0",
    "styled-components": "^4.4.0"
  },
  "devDependencies": {
    "@types/react-helmet": "^5.0.14",
    "@types/styled-components": "^4.4.0",
    "@typescript-eslint/eslint-plugin": "^2.25.0",
    "@typescript-eslint/parser": "^2.25.0",
    "eslint": "^6.8.0",
    "gatsby-plugin-tslint": "0.0.2",
    "gatsby-plugin-typescript": "^2.1.15",
    "gh-pages": "^2.1.1",
    "tslint": "^5.20.0",
    "tslint-loader": "^3.5.4",
    "tslint-react": "^4.1.0",
    "typescript": "^3.6.4"
  }

import { wrapRootElement as wrap } from "./root-wrapper";

export const wrapRootElement = wrap;

module.exports = {
  plugins: [
    `gatsby-plugin-styled-components`,
    `gatsby-plugin-typescript`,
    `gatsby-plugin-tslint`,
    `gatsby-plugin-react-helmet`
  ]
};

export const wrapRootElement: FC<Props> = ({ element }) => {
  return (
    <ThemeProvider theme={theme}>
      <Global />
      <Layout>{element}</Layout>
    </ThemeProvider>
  );
};

    const Layout: FC = ({ children }) => {
      return (
        <>
          <Helmet>
            ...
          </Helmet>
          <>{children}</>
        </>
      );
    };

export default (props: any) => <Home  />;