Nextjs 未按预期渲染并抛出“警告 Prop `style` 不匹配。” 使用内联样式时

Question

问题描述

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

索引.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 相关，例如这篇文章。但我认为这不适用于我的情况。

在这里卡了很长一段时间，希望得到任何建议。

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

Answer 1

这个快速技巧对我有用。

const [isServer, setIsServer] = useState(true)