Gatsbyjs 样式组件 CSS 延迟加载答案

【问题标题】：Gatsbyjs Styled Components CSS delayed loadingGatsbyjs 样式组件 CSS 延迟加载
【发布时间】：2019-11-04 21:43:34
【问题描述】：

目前我在使用 GatsbyJS 和样式化组件时遇到了一个奇怪的问题。

在开发中一切正常，但是当我在本地构建和提供站点时，由样式化组件创建的所有样式都会在页面完成加载后大约 100 到 300 毫秒后加载。似乎这只适用于布局和模板文件中使用的样式。

我还将gatsby-plugin-styled-components 和babel-plugin-styled-components 包含在我的项目中，但没有任何成功。

我在https://github.com/alexanderwe/gatsby-styled-components-test 创建了一个小型演示项目，它显示了错误。如果需要，可以下载并运行 yarn && yarn workspace gatsby-theme-test serve 以实时查看错误。

有没有人遇到过类似的问题或有解决方案？

感谢您的帮助

【问题讨论】：

【解决方案1】：

看起来你在gatsby-browser.js 中实现了wrapPageElement，也忘了在gatsby-ssr.js 中实现它。这意味着样式组件仅在浏览器加载时激活，而不是在服务器端渲染期间激活。

为此，只需将您的gatsby-browser.js 复制到一个新的gatsby-ssr.js 中，API 应该完全相同。

【讨论】：