search

styled-components / xstyled

A utility-first CSS-in-JS framework built for React. 💅👩‍🎤⚡️
https://xstyled.dev
MIT License
2.27k stars 107 forks source link

update documentation for dark mode state #331

Closed quantizor closed 2 years ago

quantizor commented 2 years ago

A single ampersand refers to the static component selector which will have unintended effects when the styled-components babel plugin is also used. Double ampersand refers to an instance of the component, e.g. a specific <x.div> not ALL <x.div>.

agriffis commented 2 years ago

@probablyup That's fascinating and the first I've heard of it. I thought && just increased the specificity of the selector. Is this something that changed in styled-components or has it always worked this way?

quantizor commented 2 years ago

@probablyup That's fascinating and the first I've heard of it. I thought && just increased the specificity of the selector. Is this something that changed in styled-components or has it always worked this way?

It's been troublesome behavior for a bit now. I've been wanting to change the selector for targeting instances to something else so the behavior is more consistent. My thought was & for static class name and % for instances...

gregberge commented 2 years ago

Yeah I am very suprised, for me it was increasing the specificity not giving a unique className :o