You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
When creating nested React Components with the parent overriding child styles via an additional class the css rules are ignored because they are further up in the generated css file so have less priority.
If its not against the basic paradigms of vanilla-extract an idea for a solution would be if the order would depend on the import order or one could add a order hint to the style rule.
Vanilla-extract doesn't have any control over the order in which your CSS is bundled, that is upto your bundler to decide. However, basically all bundlers will try to order your CSS in the order in which you imported it.
In this case, you're importing the styles for Elem2 after you've imported the styles for Elem1 which causes the styles to be ordered that way. If you swap the Elem2 import position with the Elem1.css import then you'll likely get what you're after.
I would suggest this is a very fragile way to write CSS though. Ideally, architect your CSS so it's not so exposed to ordering issues. For example, expose a vanilla-extract theme via your component for style overrides from the component.
Describe the bug
When creating nested React Components with the parent overriding child styles via an additional class the css rules are ignored because they are further up in the generated css file so have less priority.
If its not against the basic paradigms of vanilla-extract an idea for a solution would be if the order would depend on the import order or one could add a order hint to the style rule.
Reproduction
https://codesandbox.io/s/friendly-cdn-o4dgub?file=/src/Elem1.tsx
System Info
Used Package Manager
yarn
Logs
No response
Validations
The text was updated successfully, but these errors were encountered: