Why I like using Styled Components in React

As I like to code my side projects in React JS, I went through many style libraries/frameworks to solve the issue of writing CSS for React Apps. The library I liked the most, out of all the ones I tried for CSS-in-JS for React, was styled-components!

Why Styled-Components?

Out of all the libraries and frameworks I have tried, I have found styled-components to require the least set-up, least learning curve and was the most pleasant to work with. It also makes use of ES6 features like template literals to make writing CSS-in-JS a good experience!

Setting Up and Getting Started

To get started with styled-components in your current React project, you have to install the package through npm like this:
npm i -S styled-components

That's all the set up needed before you integrate it with your project! So far, this is my favorite part of using this library as I do not have to use a build or add another npm command to my package.json file!

So after this simple set up step, how do you use it in your project? Again, it's simple! All you have to do is import the library and start writing the styled components like so:

import styled from 'styled-components';

const AwesomeButton = styled.button`
    background-color: blue;
    border: 1px solid red;
    color: white;

    :hover {
      background-color: yellow;
    }

`

const Container = () => (
    <div><AwesomeButton>Click Me!</AwesomeButton></div>
)

As you can see, you can use the styled component you made, AwesomeButton as if it was a React component!
Also, notice how simple the syntax is? It uses ES6 Tagged Template Literals for styling, and inside those you can write normal CSS as if it was in a CSS file! See that :hover block inside the bracket? That's the same way you would write the hover in your normal CSS file if you wanted to nest styles!

The power of styled components does not stop here! Since it uses template literals, that means we can use interpolation inside the backticks. Styled components makes use of this by providing us with the ability to access the props of the component inside the styles! So, if we wanted to provide slightly different styles for a danger and a success button, we could provide a prop to change the styles accordingly. So something like <AwesomeButton danger>Stop!</AwesomeButton> should ideally render a red button. To achieve that using styled components, we do it like this:

const AwesomeButton = styled.button`
    background-color: ${props => props.danger ? red : blue};
    border: 1px solid red;
    color: white;

    :hover {
      background-color: yellow;
    }

`

We can interpolate a function in our styled components, and this function takes the component props as an argument. As you can see, we check for the danger property to change the background to red, otherwise it stays blue.

Because of the minimum set up required, and not having to learn much but also getting access to powerful features, I really prefer using styled components for writing my React projects! Go check their docs for more info as this article barely scratched the surface of what you can do with styled components!

Thank you for reading this, and I hope I was able to help you see why styled components are fun!

Comments

[dastasoft]

I agree that Styled Components are a very useful tool, I use them a lot in my projects and I find them very convenient, but you also have to take into account the disadvantages:

• The code you are writing is not standard CSS, so migrating that code to another project that doesn't have styled components can be a mess.
• The javascript load will increase, it's easier for the browser to run CSS than tons of JS.
• And a minor inconvenience, in a CRA project when you change the CSS the hot reload is instantaneous, but when you change a styled component it re-compiles and reloads the page.

[Estee Tey]

Curious - since you mentioned that you have used it in multiple projects, I would love to hear from you on why you prefer the syntax of styled-components over using CSS files!

My own experience is that CSS files would come with autocompletion as you type in them usually and in the component files, and all you have to do is to add a line like import './sth.css'.

[dastasoft]

I don't prefer the syntax of one over the other, but I found it very practical because:

• Adding vendor prefixes automatically, now you can achieve the same with CSS in a CRA project btw.
• If you are more skilled with JS than CSS it is easy to think and work with JS rules (I think this is the main reason why many developers are attracted to CSS in JS).
• In CSS you have css variables that may not work in all browsers, but the equivalent of styled components are simply props, which blend very easily with the rest of your React architecture.

To show a real-world example, some time ago I needed to make a React component library that needs to run in older browsers, so CSS variables were not an option and handling prefixes and different themes was much easier with styled-components in that particular scenario.

At the end of the day I think there is not such a bad option here, but you have to think about what problem you want to solve using any other framework/library instead of regular CSS which will be here forever.

For the autocomplete thing in styled-components you can install a VSCode plugin that does the same, with syntax highlight :)

[Estee Tey]

I see, thank you for the comprehensive response! 😄 it helped me to understand the context better!

[Ahmad Allehyany]

Yes! I like to export a global component I use in my app.js or index.js using createGlobalStyle. So far I haven't had to use it for things other than border-box or resetting, though.