条件渲染组件，Next.js 样式在首次加载时被破坏答案

【问题标题】：Conditional Rendering the components, Next.js style broken on first load条件渲染组件，Next.js 样式在首次加载时被破坏
【发布时间】：2021-10-23 18:20:20
【问题描述】：

我正在使用 Ant Design 和自定义样式表。第一次加载样式被破坏了，但是当我访问另一个页面并返回到损坏的页面时，现在看起来很好。所以问题只在第一次加载。它在开发服务器上，我已经清除了所有缓存。但还是同样的问题。

这是第一次加载后的截图

这是我从另一个页面回来后的正确样式

这是我如何渲染组件的代码：

<div>
  {jwToken || role === "restaurant_owner" ? (
    <Layout>
      <Index />
    </Layout>
  ) : (
    <div>
      <Login />
    </div>
  )}
</div>

【问题讨论】：

标签： css reactjs next.js antd

【解决方案1】：

我有一个类似的问题，我修复它的方法是添加一个取决于条件的mounted 变量。所以看起来是这样的。

// Not sure how you pass the condition, I'm assuming hooks
const { condition } = someHook()

const [mounted, setMounted] = useState()

useEffect(() => {
   setMounted(true)
   return () => setMounted(false)
}, [condition]);

return (
   <div>
       {mounted && condition && <Component/>
   </div>
)

至于为什么会发生这种情况，我怀疑它与 SSR 有关（我发现类似 issue on Github but for Material-UI）并且我的解决方案强制该条件仅在浏览器期间可用。

【讨论】：