`className` 不匹配。服务器：答案

【问题标题】：`className` did not match. Server:`className` 不匹配。服务器：
【发布时间】：2021-01-04 14:52:54
【问题描述】：

我正在使用 NextJS getServerSideProps 来获取数据，并且页面正在使用数据正确呈现。所以这很好用，除非在 html 元素上呈现动态类名属性时我收到以下错误：

Prop `className` did not match. Server: "" Client: "dark"

渲染以下组件时：

function Header(props: { darkMode: boolean }) {
  const [darkMode, setDarkMode] = useState(props.darkMode);
  
  return (
      <div className={(darkMode ? "dark" : "")}></div>   
  );
 }
 export default Header;

调试时，我可以看到 darkMode 为 true，但 div 元素仍然在没有 className 的情况下呈现，假设这是由于上述错误造成的。

我实际上在使用 MaterialUI，虽然这个元素不是一个 materialUI 元素。

我已经像这样指定了 .bablerc：

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

知道为什么我会收到此错误吗？

【问题讨论】：

您将关闭<div> 两次； </div></div>，只需一个</div>
0stone0 抱歉，这是示例中的拼写错误，仍然出现同样的错误。
出现问题是因为服务器和客户端的darkMode 值不同。任何改变该值的东西都应该发生在 useEffect 中。
似乎其他人也有同样的问题github.com/vercel/next.js/issues/7322#issuecomment-723730380。其中一些通过重命名 .babelrc 文件来解决。 fwiw 这是从道具创建状态的反模式

标签： javascript reactjs next.js

【解决方案1】：

问题似乎与提到的here 相同。如果是这样，我已经发布了答案there

className 不匹配与 React 在服务器端渲染页面后如何同步 DOM 节点有关。因为 React 只会修补/同步节点的文本上下文，而 className 是一个属性。触发警告。

参考

https://github.com/facebook/react/issues/11128#issuecomment-334882514

【讨论】：