I usually build my Styled Components with a root <Container> tag. However, in my current project, class names generated by Styled Components with identical names are colliding.
For example, <FooWidget> will be styled with the Container styles of <BarWidget>.
This happens unpredictably, but deterministically. I.e. not all <Container>s collide, but when they do, they do so in the same way every time. I can fix this by changing the components' names or root elements, but then this eliminates the scoping benefits of CSS-in-JS.
I've never had this problem before, which makes me suspect in may have to do with server side rendering on Next.js, which I'm using for the first time. If I restart the dev server, everything will display correctly on the initial render, but then break and stay broken on first refresh.
I installed Styled Components according to the Next.js guide. I found this bug on Github that may be related: https://github.com/styled-components/styled-components/issues/3125.