Why React Styled-Components?

May 22, 2019

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…

1  ypiUA11LY4koki0UiXd  Ag

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…

1  DqyO07BSDmwioiRqAIwnfw

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:

1  Is0  hhvoqmawfHJ4Tmn  Hw

Okay~~~~~ it works… but… this is really ugly and hard to read right?

Well~ lets make it better…

1  I5YcLngWVpExWA2VeUsBhA

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

1  3miG20T0TXT5JWwvnO4XQg

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…

1  lvFOMPViL1tuwrsjc9ei5g

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…

1  D9hhNqGqMusGIfS4Cb65hA

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.

1  kxjz3w  rwvM6K60LyDFvAQ

4) Passed Props

This is really useful for dynamic styling depend on props value. Example like this…

1  n49h3pmlHyYhed8VJM  QTQ

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.