具有样式化组件的下一个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中，并且没有奇怪的闪烁发生。希望这对您有所帮助。