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

Question

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

例如，将使用 的样式<FooWidget>进行样式设置。Container<BarWidget>

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

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

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