Nextjs 未按预期呈现并抛出“警告道具`样式`不匹配。”使用内联样式时[重复]

Question

问题描述

我的 nextjs 应用程序出现问题。在某些组件中，我想在 CSR/SSR 之间添加一些不同的样式/类名。这是我的问题的简化演示代码。

index.jsx

import React, { useEffect, useState } from 'react'

export default function index() {
  const [isServer, setIsServer] = useState(typeof window === 'undefined')
  const style = {
    color: isServer ? 'red' : 'yellow',
  }
  console.log('SeverSide: isServer', isServer)

  useEffect(() => {
    setIsServer(typeof window === 'undefined')
    console.log('ClientSide: isServer', isServer)
  }, [])
  return (
    <div>
      <h1 style={style}>Hi I am Danny</h1>
    </div>
  )
}

依赖版本

使用 npx create-npx-app 构建的演示项目

"dependencies": {
    "next": "11.1.2",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  }

预期和实际结果

我希望看到 h1 颜色是黄色的，但这就是我得到的

虽然isServer的状态确实发生了变化，但是样式并没有应用。

我不确定这里是否缺少任何核心概念，对结果感到非常困惑。

我尝试过的

在谷歌上搜索错误消息后，我能找到的大多数帖子都与将 styled-component 与 nextjs 一起使用有关，例如 this post。但我认为这不适用于我的情况。

在这里停留了很长时间，如果有任何建议，将不胜感激。

如果我没有说清楚，请告诉我，感谢您的阅读！

Answer 1

这个快速破解对我有用。

const [isServer, setIsServer] = useState(true)