Next.js 类渲染bug，为什么类应用到另一个元素上？

【问题标题】：Next.js class rendering bug, Why is the class applied to another element?Next.js 类渲染bug，为什么类应用到另一个元素上？
【发布时间】：2022-01-21 05:42:22
【问题描述】：

在一个元素显示而另一个不应该显示的情况下，分配给相邻元素的类 code

有一个带有渐变边框的登录按钮组件。我有一个头像组件

button auth

avatar

头像组件在初始加载页面时，与授权组件具有相同的类。

mutating component

但是，它不在代码中。如果我们切换到其他页面，这个错误就会消失。 dev hmr 和 prod 都出现该错误

这个错误发生在很多地方。项目中 styled-components、classnames、scss、bootstrap、mui。很快我们就会摆脱 boostrap && scss; 构建 next.js，服务端渲染，打字稿，

还有一个例子 Initial download

After page navigating

【问题讨论】：

标签： typescript sass next.js styled-components server-side-rendering

【解决方案1】：

有关于如何在 next.js 和一般 SSR 中使用 styled-components 的特殊说明。请记住，styled-components 在运行时完成了它的工作，这与服务器端渲染效果不佳，您需要伪装样式才能使它们正常工作。

使用this link 转到styled-components 官方说明next.js 并使用this link 查看使用styled-components 和next.js 的官方示例。

请记住，如果您最终使用给定的链接来设置您的项目并且您使用的是 next.js 12+，那么您需要进行一些小的更改。你不能再使用 babel，因为 next.js 停止使用 babel 来渲染你的项目，你需要使用 next.config.js 文件。通过将experimental.styledComponents 设置为true，您不再需要使用 babel 文件。

/** @type {import("next").NextConfig} */
const config = {
    experimental: {
        styledComponents: true,
    },
};

module.exports = config;

【讨论】：