Next.js 和样式组件在刷新时服务器和客户端之间不同步

Question

我有一个使用样式组件的 Next.js 应用程序。首次加载任何页面时，都没有任何抱怨，并且所有内容看起来都具有正确的样式。然而，当我刷新页面时，一切看起来仍然正常，但我收到控制台错误：

Warning: Prop `className` did not match. Server: "sc-TXQaF bfnBGK" Client: "sc-bdnylx kKokSB"

我尝试简化特定组件上的样式，但错误仍然存​​在。我尝试从 DOM 中完全删除该组件，这会导致 DOM 中的下一个元素出现相同的错误。所以这似乎是一个全球性问题。

我已按照此处找到的使用 Next.js 和样式组件的指南进行操作： https: //github.com/vercel/next.js/tree/master/examples/with-styled-components

.babelrc我在根目录中有该文件：

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

_document.js我的页面目录中有该文件：

import Document from 'next/document'
import { ServerStyleSheet } from 'styled-components'

export default class MyDocument extends Document {
    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()
        }
    }
}

这是我的样式组件之一的示例：

import styled from 'styled-components';

export const Block = styled.div`
margin: ${props => props.small ? '2rem 0' : '4rem 0'};
margin-top: ${props => props.clearTop ? '0' : null};
`;

...尽管我试图将其简化为像这样简单的东西，但控制台错误没有任何变化：

import styled from 'styled-components';

export const Block = styled.div`
position: relative;
`;

最后，这是一个仍然会产生错误的简化页面：

import { useContext, useEffect } from 'react';
import { useRouter } from 'next/router';

import Layout from '../components/layout';
import { Block } from '../components/styled/Block';

import { userContext } from '../context/userContext';;

function Profile() {

  const router = useRouter();

  const { loggedIn } = useContext(userContext);

  useEffect(() => {
    if (!loggedIn) router.push('/login');
  }, [loggedIn]);

  return (
    <Layout>
      <Block>
        <h1>Test</h1>
      </Block>
    </Layout>
  )

}

export default Profile;

我有点束手无策了。

Answer 1

我相信我找到了答案。我没有 babel 风格组件的开发依赖。

npm install babel-plugin-styled-components --save-dev

你的package.json文件应该有这个：

"devDependencies": {
  "babel-plugin-styled-components": "^1.11.1"
}

安装完毕后，并且将_document.js和.babelrc文件正确放置在您的应用程序中，您应该不会遇到任何问题。