从纱线工作区通用包导入时样式化的组件服务器和客户端不匹配

Posted 2023-03-15

【中文标题】从纱线工作区通用包导入时样式化的组件服务器和客户端不匹配

【英文标题】：styled components server and client mismatch when importing from a yarn workspaces common package

【发布时间】：2021-11-13 00:11:56

【问题描述】：

我有一个名为 Button 的样式组件，它从 packages/common（简单的 React 应用程序）导出，我想在 packages/landing-page（NextJs 应用程序）中使用它。

当像这样导入样式组件时：

import styled,  css  from "styled-components";

const Button = styled.button`
// ...
`

该组件在我的packages/landing-page 应用程序中运行良好，但由于它是在服务器端呈现的，因此我得到了样式组件类之间的经典服务器和客户端不匹配。我为 NextJs 项目内部的组件解决了这个问题，总是从 styled-components/macro 导入。

但这并不能解决从 packages/common 导入的样式组件的不匹配问题。

当组件来自不同包时如何解决不匹配问题？

【参考方案1】：

您的.babelrc 配置文件中可能缺少以下配置。此错误是由于补液问题引起的。如果不将 s-s-r 配置设置为 true，您将在客户端和服务器之间的通信中出现校验和错误。下面的配置应该会处理它。

    "presets": [
        "next/babel"
    ],
    "plugins": [
        [
            "styled-components",
            
                "s-s-r": true
            
        ]
    ]

要了解有关补液的更多信息，我推荐这篇文章：What the hell are hydration and rehydration

这是来自 styled-components 文档的简短说明：

通过为每个样式化的组件添加唯一标识符，该插件避免了由于客户端和服务器上生成不同的类而导致的校验和不匹配。如果你不使用这个插件并尝试在服务器端渲染 styled-components，React 将在 rehydration 期间抱怨 html 属性不匹配警告。

【讨论】：

谢谢，但我知道这一点。这是一种方法，另一种方法是使用“样式化组件/宏”导入（在此处阅读更多信息：styled-components.com/docs/tooling#babel-macro），效果很好。但它不适用于从我的 yarn 工作区中的另一个包导入的组件。加上 .babelrc 配置需要从 CRA 中弹出，我宁愿避免。