styled-components
styled(Component) overrides being ignored
Environment
System:
- OS: Linux 5.16 Pop!_OS 21.10
- CPU: (8) x64 AMD Ryzen 5 3500U with Radeon Vega Mobile Gfx
- Memory: 137.05 MB / 5.74 GB
- Container: Yes
- Shell: 5.8 - /usr/bin/zsh
Binaries:
- Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node
- Yarn: 1.22.17 - ~/.nvm/versions/node/v16.13.0/bin/yarn
- npm: 8.1.0 - ~/.nvm/versions/node/v16.13.0/bin/npm
npmPackages:
- babel-plugin-styled-components: ^2.0.6 => 2.0.6
- styled-components: ^5.3.5 => 5.3.5
Reproduction
I have some styled-components on a project that are overriding some styles from another component a component library using styled(Component) everything was working fine on version 5.3.3, but when i make the update to version 5.3.5 the overrides are being ignored
Steps to reproduce
Override another component styles using styled(Component)
Expected Behavior
Styles should be overriden
Actual Behavior
Style override is being ignored. on the print you can see .jtgMwf are the base styles, and .fIllxh are the override styles
Same issue here in production build with vite. I've added a comment in the wrong place, but it's still relevant. One "fix" that worked was to downgrade to v5.1.1, so I suppose this bug was introduced in v5.2.0.
It's a repeat of https://github.com/styled-components/styled-components/issues/1816 . There was a comment in there saying the issue was fixed, but no explanation how.
The underlying issue is that sometimes the stylesheets are inserted in the "wrong" order such that the extension styles are being overridden by the base styles. I don't know how exactly the stylesheets are ordered. It seems like it should be possible for styled-components to sort the stylesheets so that extension stylesheets always come after base style sheets.
After spending waaayyyy too much time trying to debug this, I finally figured out that in our case yarn was creating multiple "virtual packages" for styled-components, each of which would have its own style tag and not having the styles in the right order as a result. Strangely, styled-components wasn't printing any warnings about this in the console but it was creating multiple style tags in the header.
Apparently the way yarn works is that when a module has peer dependencies, if those peer dependencies are satisfied differently in different parts of the dependency graph, it'll create a virtual package and you'll have multiple copies of the package in your bundle.
You can check this by running (in yarn 2+) yarn why styled-components and you might see it printing hashes after styled-components in different places.
The only way to ensure everything uses the same styled-components code is to have exactly the same dependencies to satisfy the peer depenencies for styled-components - that is, react, react-dom, react-is, @types/react, @types/react-dom, and @types/react-is. If you are importing modules that import styled-components directly instead of as a peer dependency then you will want to have the exact same versions between all modules of those peer dependencies.
Just a note on the above, this case isn't limited to peer dependencies. Yarn often actually resolves dependencies on the same package to different versions in workspaces unfortunately 😓 This can often happen during upgrades.
The best way to prevent this imho is to use yarn-deduplicate: https://github.com/scinos/yarn-deduplicate That's a lot faster than modifying the lockfile and a good alternative to prevent duplicate dependencies between compatible version ranges in general.
Another alternative is obviously resolutions. That however requires rerunning yarn in the workspaces root when dependencies change and ignores version ranges entirely
Had this issue in a monorepo whereby two sets of styles were loaded in the head element so overrides did not work. The solution was to use webpack resolution to have the package point to its own styled-components module.