CSS样式刷新失败：如何正确地在Next.js中使用JSS

发布于 2020-08-18  785 次阅读

JSS是React组件库material-ui默认使用的CSS-in-JS解决方案。JSS会在运行时将CSS渲染到DOM上。在与Next.js一同使用时，由于Next.js会在服务端执行预渲染，会出现JSS渲染到CSS的类名与渲染到DOM元素的class属性上的类名不匹配，导致样式无法正确显示的情况，具体表现为：

  • Next.js启动后的第一次渲染，样式正确显示。如：<div class="makeStyles-toolbar-10">
  • 之后每次重渲染，DOM元素的class末尾的数字会随着渲染次数增加而变大。如：<div class="makeStyles-toolbar-30">，而CSS依然是.makeStyles-content-9
  • 重启动Next.js后又正常了。

分析以上表现可以得出，JSS在服务端渲染时每次渲染会增大尾部的数字。这可能是防止类名冲突的一种手段，虽然个人觉得很蠢。

解决方法是修改_document.jsx，自定义renderPage()。具体实施可以参考material-ui官方文档中提供的如何在服务端渲染中使用JSS的说明，其中有Next.js的用例。虽然能解决问题但是好像每次热重载都会造成一次页面刷新，不过也还算好吧。