Javascript 使用样式化组件的Next.Js React应用程序。警告：道具'className'不匹配。服务器："；x"；客户：“；“是”；

在我的NextJS React应用程序中，当我更改代码中的某些内容时，HMR会工作并显示正确的更新，但如果我刷新页面，则会再次出现此错误。这在开发模式下发生。 注意到有很多关于这个错误的主题，全天都在尝试不同的配置设置

请帮我消除这个错误

错误：

警告：道具

className

不匹配。服务器：“sc cBoprd hjrjKw” 客户：“sc iCoHVE daxLeG”

使用“babel插件样式组件”：“1.11.1”

可能与问题相关的文件：

\u App.tsx

---

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

最后，唯一有效的解决方案是将.babelrc.json重命名为babel.config.json。如果有人仍然在这里遇到此错误，我将留下如何修复此错误的参考资料。此错误意味着服务器上的某些内容与客户端不同。 如果客户端执行重新渲染，则可能发生这种情况

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

因此，这里的解决方案是只从服务器获取样式

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

要解决此问题，您的文档组件中需要类似的内容：

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

导出默认类MyDocument扩展文档{
静态getInitialProps（{renderPage}）{
const sheet=new ServerStyleSheet（）；
const page=renderPage（（应用）=>（道具）=>
sheet.collectStyles（
您收到的错误是由于服务器上也呈现了仅客户端的代码造成的。您可以将整个树发布到收到错误的位置吗？ConfigurationProvider、Normalize、字体和页面内容。
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()
    }
  }
}

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

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