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...
For further actions, you may consider blocking this person and/or reporting abuse
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
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" />! 😄the real problem is you need to eject create-react-app for it 😁
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...
🤯🤩
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.
How does it show a lack of understanding CSS?
The CSS attributes used are the exact same & it is eventually transpiled to actual CSS
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.
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
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
really nice post. using styled for a few months now.
btw
ProgressBarhave a native html element.developer.mozilla.org/en-US/docs/W...Hey, thank you so much, I'm glad you found it nice 😄
Thanks for the info, I'll be sure to update it !
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.
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?
Hey, no worries, go ahead ! Thanks for sharing it 😄
Great post!