在我的 NextJS React 应用程序中，当我更改代码中的某些内容时，HMR 会工作并显示正确的更新，但如果我刷新页面，则会再次出现此错误。这发生在开发模式下。 注意到很多主题都出现此错误，尝试了一整天不同的配置设置，毫不费力。
请帮助我消除错误。
错误：
警告：道具
不匹配。服务器：“sc-cBoprd hjrjKw” 客户：“sc-iCoHVE daxLeG”className
使用 “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
}
]
]
}
此错误意味着服务器上的某些内容与客户端不同。 如果客户端重新渲染，就会发生这种情况。
样式化组件在 React 元素上使用随机 id，当这些元素重新渲染时，它们会在客户端获得一个新的随机 id 。
所以这里的解决方案是专门从服务器获取样式。
基本上你需要添加一个自定义的pages/_document.js（如果你不 有一个）。然后复制样式组件的逻辑以注入 服务器端渲染样式到
<head>
要解决此问题，您需要在文档组件中添加类似的内容：
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下一个文档中的完整示例代码位于此处
最后，唯一有效的解决方案是将 .babelrc.json 重命名为 babel.config.json。如果有人仍然遇到此错误，我会留下参考如何修复该问题解决方案
对我有用的是：
创建一个 .babelrc （在根目录上）。
在 .babelrc 中：
{ “预设”：[“下一个/babel”]， “插件”：[[“样式组件”，{“ssr”：true}]] }
我也遇到了这个问题，清除缓存/重新启动我的开发服务器到目前为止似乎已经解决了这个问题。
我发现解决方案是删除
.nextnpm run dev