css - 为什么我的样式化组件生成的类名会发生冲突？

Question

我通常使用根<Container>标签构建我的样式化组件。但是，在我当前的项目中，由具有相同名称的样式化组件生成的类名发生冲突。

例如，<FooWidget>将Container使用<BarWidget>.

这是不可预测的，但是是确定性的。即不是所有<Container>的 s 都发生碰撞，但是当它们发生碰撞时，它们每次都以相同的方式发生。我可以通过更改组件的名称或根元素来解决此问题，但这会消除 CSS-in-JS 的作用域优势。

我以前从未遇到过这个问题，这让我怀疑这可能与我第一次使用 Next.js 上的服务器端渲染有关。如果我重新启动开发服务器，一切都会在初始渲染时正确显示，但在第一次刷新时会中断并保持中断。

我根据 Next.js 指南安装了 Styled Components。我在 Github 上发现了这个可能相关的错误：https ://github.com/styled-components/styled-components/issues/3125 。

标签： cssnext.jsstyled-components