DEV Community

Cover image for Styled components: what, why and how?

Styled components: what, why and how?

Christopher Kade on May 15, 2019

Styled Components are a way of styling your React components using CSS and the advantages offered by ES6, they are best explained by the official d...
Collapse
 
mahmoudjbor profile image
MahmoudJbor

Thanks christopher for the post.
but do you think that one of disadvantages of styled components is inspecting the styles in browsers dev tools, i find it difficult to follow up, what do you think?
BTW i'm new to styles components

Collapse
 
christopherkade profile image
Christopher Kade • Edited

This is a common problem with styled components so thank you for bringing it up.

A solution would be to use the plugin mentioned here: styled-components.com/docs/tooling

It will display named classes instead of the randomly generated ones, so <button class="asdf123" /> would be <button class="Button-asdf123 asdf123" /> ! 😄

Collapse
 
itsjzt profile image
Saurabh Sharma • Edited

the real problem is you need to eject create-react-app for it 😁

Thread Thread
 
christopherkade profile image
Christopher Kade

That's definitely a problem, it seems like the babel macro feature would allow us to use it without ejecting our app: styled-components.com/docs/tooling...

Thread Thread
 
itsjzt profile image
Saurabh Sharma

🤯🤩

Collapse
 
mujaddadi profile image
Taha Hassan Mujaddadi

Although I see some advantages of Styled Components but I don't see them important enough. I am still not convinced. At the moment, it looks like Styled Components are for those who don't understand CSS properly or like to use latest fashionable technologies just for the sake of it.

Collapse
 
christopherkade profile image
Christopher Kade

How does it show a lack of understanding CSS?

The CSS attributes used are the exact same & it is eventually transpiled to actual CSS

Collapse
 
mujaddadi profile image
Taha Hassan Mujaddadi

I was referring to yours these sentences "CSS is global by nature." and "And yet its very nature is something that is often disliked by many people, as changing a value somewhere can "break" something elsewhere. That's where CSS scoping comes into play.".

I have been working with CSS for almost 11 years now and I don't have the issues you mentioned. If you define a style for an element, it will be of course global. If you use classes, it will be specific. In fact CSS' global nature is it's one of the powerful feature as it help developers from writing duplicate styles. If we understand, the specificity and cascading nature of CSS, these issues never comes. I blame the frameworks such as Bootstrap for this that it made people not to learn basic rules of CSS.

Collapse
 
itsjzt profile image
Saurabh Sharma • Edited

really nice post. using styled for a few months now.

btw ProgressBar have a native html element.developer.mozilla.org/en-US/docs/W...

Collapse
 
christopherkade profile image
Christopher Kade

Hey, thank you so much, I'm glad you found it nice 😄

Thanks for the info, I'll be sure to update it !

Collapse
 
gfunk1230 profile image
Greg Campoverde

Hey I just started experimenting with styled components. Would you know why I see duplicate classes with same rules. So when rendering 3 button styled components it generates 3 class unique hash with the same css rules

Collapse
 
drub4ndrbn profile image
Simon D.

Thanks for the article.
I work with styled-components since 2+ years.
IMO it's the best way to handle styling in react with a good SOC.
You can associate it with react-responsive to build your responsive app. really awesome with the ability of using props value in styled-components

Collapse
 
eh3ano9 profile image
Ehsan Omidi

I see the main advantage of styled components being the fact that they are autoprefixed. When you apply a style like display: flex inline this doesn't get autoprefixed and breaks on different browsers.

Collapse
 
hyunseo0419 profile image
hyunseo0419

Thank you for the good article. If you don't mind, can I translate it into Korean because I want to share this with the people I study with?

Collapse
 
christopherkade profile image
Christopher Kade

Hey, no worries, go ahead ! Thanks for sharing it 😄

Collapse
 
daryllman profile image
daryllman

Great post!