накапливаются между каждым переходом страницы с помощью NextJS и эмоций (Чакра)

#typescript #next.js #emotion #chakra-ui

Вопрос:

После создания 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 на текущую, чтобы обеспечить плавный переход на страницу (упрощенное резюме).

У меня такое чувство, что «старый» ДОМ не отбрасывается правильно (следует ли его отбрасывать?).

Результатом накопления этих стилей является то, что в итоге я получаю слишком много стилей css, конкурирующих друг с другом, нарушая весь дизайн.