Next.Js 带有样式组件的 React 应用程序。警告：道具 `className` 不匹配。服务器：“x” 客户端：“y”
Posted
技术标签:
【中文标题】Next.Js 带有样式组件的 React 应用程序。警告：道具 `className` 不匹配。服务器：“x” 客户端：“y”【英文标题】：Next.Js React app with styled components. Warning: Prop `className` did not match. Server: "x" Client: "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",
"s-s-r": true,
"displayName": true,
"preprocess": false
]
]
【问题讨论】：
您收到的错误是由于只有客户端的代码也在服务器上呈现。能贴出整棵树吗？您收到错误的 ConfigurationProvider、Normalize、字体和页面内容。 【参考方案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
【讨论】：
以上是关于Next.Js 带有样式组件的 React 应用程序。警告：道具 `className` 不匹配。服务器：“x” 客户端：“y”的主要内容，如果未能解决你的问题，请参考以下文章
如何在 next.js 中使用带有样式组件主题的 window.matchMedia？
如何在 react 和 next js 中使用 Styled 组件创建全局样式，使用 css 文件和 styled 组件的组合是不是更好？
next.js 我不知道如何将全局 .container css 样式应用到其他页面