Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Temmuz
Temmuz

Posted on

     

Double ampersand trick in SASS with React

I learned a cool little trick last week while reviewing a PR and wanted to share it with everyone. This is pretty useful if you're using a library likeemotion withReact.

constStyledButton=styled(Button)`  && {    padding: 0;  }`

When I saw this, first I thought, they meant to style the Button component and redundantly included one ampersand (which i see some devs quite often do by mistake), the second one would then be a typo. But when I checked what it does in the Inspector, it was actually overwriting the default styling of the Button component like this:

.css1234--Button{// padding: 24px; -> overwritten}.css5678--StyledButton.css5678--StyledButton{padding:0;}

Repeating the class name with double ampersand will carry the priority above and overwrite the default styling coming from the Button component.
My mind is blown and I am bewailing the years of never having heard this trick and trying to overwrite everything with!important (when ordering the rules according to the cascade wasn't an option)

I'm really not sure how known this is but I thought it's super cool.
I hope you find that useful.

Please share your ampersand tricks with me via pm or comment below <3

Top comments(7)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss
CollapseExpand
 
rodmartinezmedina profile image
Rodrigo Martinez Medina
Full-Stack Developer (MERN). Graphic designer. Former pro musician.
  • Location
    Barcelona
  • Work
    Full-Stack Developer (MERN) in process. at Self-employed
  • Joined

Great article, to spread a useful functionality.

Works also with styled components!
It's in the official documentation for styled components for instance with some example.
styled-components.com/docs/basics#...

CollapseExpand
 
temmuz profile image
Temmuz
Senior Frontend Engineer @ Staffbase
  • Location
    Germany
  • Joined

Thanks for pointing out. Maybe I should read the documentation better next time :P

CollapseExpand
 
rodmartinezmedina profile image
Rodrigo Martinez Medina
Full-Stack Developer (MERN). Graphic designer. Former pro musician.
  • Location
    Barcelona
  • Work
    Full-Stack Developer (MERN) in process. at Self-employed
  • Joined

Man, you shared useful info with people and found it by yourself. More than cool enough!
:)

CollapseExpand
 
dance2die profile image
Sung M. Kim
Exploring the world of TypeScript, React & Node
  • Location
    NYC - the Big 🍎
  • Education
    SUNY Stony Brook
  • Joined
• Edited on• Edited

Nice tip there, Temmuz.

Man, I never thought that'd be the case.

Do you have a link to a documentation on how that works by chance?

CollapseExpand
 
temmuz profile image
Temmuz
Senior Frontend Engineer @ Staffbase
  • Location
    Germany
  • Joined
• Edited on• Edited

I didn't find anything on that matter really. I get why double ampersand doubles the classname but the thing about the priority is something I've only come to the conclusion of. Nothing written on that afaik

CollapseExpand
 
dance2die profile image
Sung M. Kim
Exploring the world of TypeScript, React & Node
  • Location
    NYC - the Big 🍎
  • Education
    SUNY Stony Brook
  • Joined

You gotta do a PR for this on the emotion repo :)

CollapseExpand
 
5456qwe profile image
1214586
308 bio permanently changing
  • Location
    México
  • Joined

yo das really nais stuff my friend

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

Senior Frontend Engineer @ Staffbase
  • Location
    Germany
  • Joined

Trending onDEV CommunityHot

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp