If you ever style your component in React you find out there are few ways to do it. Before talking about styled-components I will point out the limitation and frustration that Frontend developer might encounter.
Consider following example…
This is the classic way to styled your component and it is perfectly fine and working approach. But… it just only for static styling what about your component accept the prop called size to determine the avatar image size?
Well~ you probably will do it like this…
Yeah~ you get the job done. Hovever, now you have more things to concern and take care when you doing debuging UI styling. You have to keep looking into the Profile.js and profile.css files and of course thats not really a big deal for this small example (imagine you have a big component). I pretty sure many of us will putting all your css style into one file called main.css or styles.css or whatever.css because of lazy (maybe) or OCD (Damn why need to create a new css file just for these few line of code 😕). This will make your css style more massive and hard to read and search (if you have terrible naming convention)
Alright, it seems like the ideal way is to putting all the relavent styling into the component itself. In React, you can’t write any css in the component file because it is a Javascript file. The only way you can do is write an inline style into the component which is React using JSX to render the view and mainpulate your styling. Eventually your component will look like this:
Okay~~~~~ it works… but… this is really ugly and hard to read right?
Well~ lets make it better…
This is better right now and readable and you will notice the syntax is no longer CSS. It is an object with camelCase CSS property. Nothing wrong with that but the inline styling is not support pseudos and media queries. Therefore, inline styling is also discouraged by the react team. Sometimes, you found a cool CSS snippet and you can’t copy and paste it directly what a pain!
Why styled-components?
There are few reasons why you should use styled-components without further talking, let’s show some code…
npm install —save styled-components
1) Build a custom component with CSS
Did you notice something? yeah~ styled-components allow you styling with CSS while build a custom component for it. This wasn’t that bad idea because when you read the component you know what it does. It looks clean and readable and most importantly you can write CSS in the component file!
Well~ to have a better picture between class base styling and with styled-components, look at this example…
Although both are achieved the same thing but the develop experience are different. With styled-components you don’t have to split the CSS styling into different file which mean is easy to maintain and the component is more independently.
2) Styling with existing component
You may already have some existing component (e.g third party UI library) and you want to add some addtional styling. In styled-components it just as simple as pass the component into styled() function. Like this…
Easy? yes it does~
3) nest styling rules
styled-compoent allow you to write nest styling rules just like sass. This is really the big plus to write a lighten and elegant css.
4) Passed Props
This is really useful for dynamic styling depend on props value. Example like this…
The custom component will able to retrieve the props by defined within the syntax ${props => { /* do whatever you want */ }}
There are a lot more if you interested you should check it out the repo. Hope this help and feel free share your way to do all this.