相关疑难解决方法(0)

警告:Prop `className` 与 Next.JS 站点中的样式组件不匹配

我在 Stack Overflow 上搜索了类似的问题,但答案要么涉及旧版本,要么与我的情况无关。

对于使用样式组件的页面上的第一个组件,我收到上述错误。如果我删除该组件,我会收到下一个组件的错误,依此类推,因此我假设水合过程存在问题,并且每个 className 都会发生这种情况。

我有一个_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()
    }
    
}
Run Code Online (Sandbox Code Playgroud)

我的预感是这与这段代码有关,因为在我升级到 Typescript(并且必须更改我的 _app.tsx 文件)之前,我没有收到此错误,但我不知道如何修复它。

任何帮助将不胜感激。

reactjs styled-components next.js

9
推荐指数
2
解决办法
1万
查看次数

标签 统计

next.js ×1

reactjs ×1

styled-components ×1