Why I like using Styled Components in React

Ahmad Allehyany — Mon, 05 Apr 2021 22:15:15 +0000

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!

DEV Community: Ahmad Allehyany

Why I like using Styled Components in React

Why Styled-Components?

Setting Up and Getting Started