<style> 在每个页面过渡之间堆积着 NextJS 和 Emotion (Chakra)

如何解决<style> 在每个页面过渡之间堆积着 NextJS 和 Emotion (Chakra)

在构建当前项目的 prod 版本并在本地对其进行测试后，我意识到样式有问题：

简单地悬停按钮会无缘无故地破坏设计，

如果打开了一个 Drawer（脉轮）并且我点击了其中的一个链接 (route/link)，则加载的页面会保留 body 应用的 Drawer 样式包含 overflow: hidden 的上一页因此中断滚动，

最后，似乎 <style> DOM 节点正在逐页堆积（当使用 next/link 转换时）。我通过在每次页面转换后计算控制台中 <style data-emotion="..." /> 的数量来确认：

$("head").querySelectorAll("[data-emotion]").length
149
$("head").querySelectorAll("[data-emotion]").length
694
$("head").querySelectorAll("[data-emotion]").length
731
$("head").querySelectorAll("[data-emotion]").length
736
$("head").querySelectorAll("[data-emotion]").length
785
$("head").querySelectorAll("[data-emotion]").length
1632
$("head").querySelectorAll("[data-emotion]").length
3268
$("head").querySelectorAll("[data-emotion]").length
6536
$("head").querySelectorAll("[data-emotion]").length
13072

有人遇到过类似的事情吗？

我“理解”（至少我尝试过）NextJS 通过在当前页面上加载 DOM 来启用页面转换，以允许平滑的页面转换（简单总结）。

我感觉“旧”DOM 没有被正确丢弃（应该丢弃吗？）。

这些样式堆积的结果是，我最终有太多的 css 样式相互竞争，破坏了整个设计。