Next.Js 带有样式组件的 React 应用程序。警告：道具 `className` 不匹配。服务器：“x” 客户端：“y”答案

【问题标题】：Next.Js React app with styled components. Warning: Prop `className` did not match. Server: "x" Client: "y"Next.Js 带有样式组件的 React 应用程序。警告：道具 `className` 不匹配。服务器：“x” 客户端：“y”
【发布时间】：2021-01-27 20:31:06
【问题描述】：

在我的 NextJS React 应用程序中，当我更改代码中的某些内容时，HMR 工作并显示正确的更新，但如果我刷新页面，此错误再次出现。这发生在开发模式下。注意到很多主题在哪里出现此错误，并毫不费力地尝试了一整天不同的配置设置。

请帮助我摆脱错误。

错误：

警告：道具className 不匹配。服务器：“sc-cBoprd hjrjKw” 客户端：“sc-iCoHVE daxLeG”

使用 "babel-plugin-styled-components": "1.11.1"

可能与问题相关的文件：

_App.tsx

function MyApp({ Component, pageProps, mainController }) {
  return (
    <ConfigurationProvider configuration={configuration}>
        <ThemeProvider theme={mainController.getTheme()}>
          <Normalize />
          <Font />
          <Component {...pageProps} controller={mainController} />
        </ThemeProvider>
    </ConfigurationProvider>
  );
}

export default appControllerContext(MyApp);

_document.tsx

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()
    }
  }
}

.babelrc

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

【问题讨论】：

您收到的错误是由于只有客户端的代码也在服务器上呈现。能贴出整棵树吗？您收到错误的 ConfigurationProvider、Normalize、字体和页面内容。

标签： javascript reactjs babeljs next.js styled-components

【解决方案1】：

我也遇到了这个问题，到目前为止，清除我的缓存/重新启动我的开发服务器似乎已经解决了这个问题。

【讨论】：

【解决方案2】：

最后，唯一可行的解决方案是将 .babelrc.json 重命名为 babel.config.json。如果有人在这里仍然遇到此错误，我会留下参考如何解决该问题solution

【讨论】：

【解决方案3】：

这个错误意味着服务器上的某些东西与客户端不同。如果客户端重新渲染，就会发生这种情况。

样式化组件在 React 元素上使用随机 id，当这些元素被重新渲染时，它们会在客户端获得一个新的随机 id。

所以这里的解决方案是只从服务器获取样式。

from the docs:

基本上你需要添加一个自定义页面/_document.js（如果你不有一个）。然后复制样式组件的逻辑以注入服务器端渲染样式到<head>

要解决此问题，您需要在 Document 组件中添加类似的内容：

export default class MyDocument extends Document {
  static getInitialProps({ renderPage }) {
    const sheet = new ServerStyleSheet();
    const page = renderPage((App) => (props) =>
      sheet.collectStyles(<App {...props} />)
    );
    const styleTags = sheet.getStyleElement();
    return { ...page, styleTags };
  }
  ...
  render() { ..}
}

最后一步（如果错误仍然存在）是删除缓存：删除.next文件夹并重启服务器

Next 文档中的完整示例代码是 here

【讨论】：