具有样式组件组件库的下一个JS

Question

我正在尝试使下一个js正确地使用已编译的样式化组件组件库加载。这是用于重现该问题的简单回购协议：https://github.com/vongohren/fouc-example

所以发生的事是，我有一个小的应用程序可以渲染组件，但是只有在加载客户端后，它才会在SSR请求中显示样式。

我正在尝试在文档中进行加载的所有情况：https://github.com/zeit/next.js/blob/canary/examples/with-styled-components/pages/_document.js

但是它不能从组件中捕获CSS。仅SSR内置的组件本身起作用，而我导入的组件不起作用。

我该如何调试并弄清楚如何将CSS附加到SSR请求上，而不仅是加载JS。

在组件库中使用https://github.com/callstack/linaria时，我可以使某些东西正常工作，因为它输出CSS文件，因此我可以导入并添加到SSR渲染中。但是如何使用样式化组件来实现这一点？

Answer 1

[我看到了您的仓库，看起来您的.babelrc可以更改。

此配置对我来说效果很好：

"plugins": [
        [
          "babel-plugin-styled-components",
          {
            "ssr": true,
            "displayName": true,
            "preprocess": false,
            "minify": false
          }
        ]
      ]

这些样式已加载到SSR中，并且没有发生任何奇怪的闪烁。希望这对您有所帮助。