reactjs - 为什么在安装完 styled-components 后还需要安装 gatsby-plugin-styled-components

Question

我正在学习 Gatsbyjs 并看到了一件奇怪的事情。

例如，如果我想使用样式组件，我需要安装:gatsby 插件样式组件和样式组件

然而，我尝试仅安装样式组件并且它有效。

我的问题是:

为什么我需要安装相关的Gatsbyjs插件？

Answer 1

答案是，仅使用 styled-components 就会导致 styled-components 应用于客户端 JavaScript 运行时。因此，有时，当您加载 Gatsby 网站时，您会在网站上看到使用 styled-components 编写的样式，但这些样式不会立即出现在您的网站上，而是会在延迟一段时间后应用，这可能会导致一些问题奇怪的视觉效果(元素跳跃，或改变颜色/大小/其他属性)。

gatsby-plugin-styled-components 确保样式直接从 HTML 传递到客户端。