`className` 不匹配。 服務器：

Question

我正在使用 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 }]]
}

知道為什么我會收到此錯誤嗎？

Answer 1

似乎問題與此處提到的問題相同。 如果是這樣的話，我已經在那里發布了答案

className不匹配與 React 在服務器端渲染頁面后如何同步 DOM 節點有關。 因為 React 只會修補/同步節點的文本上下文，而className是一個屬性。 觸發警告。

參考

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