警告：带有样式组件的 Next.JS 站点中的 Prop `className` 不匹配

Question

我在 Stack Overflow 上搜索过类似的问题，但答案要么是旧版本，要么与我的情况无关。

页面上第一个使用样式化组件的组件出现上述错误。如果我删除该组件，我会收到下一个组件的错误，依此类推，所以我认为水合过程存在问题，并且每个类名都会发生这种情况。

我有一个 _document.tsx 文件，它扩展了 Document 类并具有以下 getInitialProps 函数

static async getInitialProps (ctx) {

    const sheet = new ServerStyleSheet()
    const originalRenderPage = ctx.renderPage

    try {

        ctx.renderPage = () =>
            originalRenderPage({
            enhanceApp: App => props => sheet.collectStyles(<App {...props} />)
        })

        const initialProps = await Document.getInitialProps(ctx)
        
        return {
            ...initialProps,
            styles: (
                <>
                    {initialProps.styles}
                    {sheet.getStyleElement()}
                </>
            )
        }
        
    } finally {
        sheet.seal()
    }
    
}

我的直觉是它与这段代码有关，因为在我升级到 Typescript（并且不得不更改我的 _app.tsx 文件）之前，我没有收到这个错误，但我不知道如何修复它。

任何帮助将不胜感激。

Answer 1

尝试安装babel-plugin-styled-components，然后使用以下配置将.babelrc 文件添加到项目的根目录。这可确保在补液过程中不会出现类生成不匹配的情况。

{
    "presets": ["next/babel"],
    "plugins": [["styled-components", { "ssr": true }]]
}

来自babel-plugin-styled-components's documentation：

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