Next 带有样式组件的 JS 组件库

Question

我正在尝试让下一个 js 使用已转换样式的组件组件库正确加载。这是一个用于重现问题的简单 repo：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

我看到了你的 repo，看起来你的 .babelrc 可以更改。

这个配置很适合我：

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

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