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

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


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的用例。虽然能解决问题但是好像每次热重载都会造成一次页面刷新,不过也还算好吧。