Intro to Styled Components for your React App
Tags: webdev, javascript, react, beginners
Published: 2021-02-09 10:07:12

If you are just a beginner React developer or an experienced one, there always be a moment, when you come across a question about styling your application. 

And here you have a lot of options such as:
- plain "vanilla" CSS files
- modules like Classes
- preprocessors like SASS
- frameworks like Tailwind or MaterialUI
- styled components

I have tried all of them. I have build projects where I used only pure CSS and nothing more. Then I tried modules and was impressed how good those are if you want to assign classes dynamically. Then I tried CSS frameworks and was surprised how quick you can style your project without spending time thinking about responsiveness, design etc. Then I tried **styled components** and they became my favourite since then. 

## What is Styled Components?

**styled-components** is a library, which helps you to create components already with a style. This is important moment to understand. In React everything is about a component, so if you like to think in "component's way" of writing your code, this approach is perfect for you. 

With **styled-components** you are not writing CSS anymore, you are creating a component with its own styles.

## Installation and Usage

First its necessary to install this library to your project:
```
npm install --save styled-components
```
Than you can import this library to your JavaScript file (forget about .css files) and start using it there:

```react
import styles from "styled-component"
```
After this we can create a component and style it very easily.

Let's say we want to create a component which would be a wrapper or container for another elements. This is a widely used use case by the way. 
For example, in order to align buttons or links vertically, we need to assign a `className` to a wrapping `div` and then style it in CSS file using `display:flex` and other properties. And we have to do it every time we need such container.

With **styled-components** we create a separate component called let's say `Wrapper` and style it:

```react
export const Wrapper = styled.div`
  display: flex;
  justify-items: center;
  align-items: center;
  margin-top: 1rem;
`;
```
So what is going on here? 
1.We created a variable called Wrapper (this is our component) 2.We accessed **styled** library we imported above and took `div` element from there
3.We styles `div` element using *template literal* (you should be familiar with this from JavaScript) using usual CSS properties we always used
4.We added word Export to the component, so we can import it to another files where we want to use it

That's it. Simple as that. Now we can use this component in any place we like:
```react
import {Wrapper} from "./Wrapper.js"

const Buttons = ({children}) =>{
 return(
 <Wrapper>{children}</Wrapper>)
}
```

## Why to use Styled-Components?

There are many reasons which attracts me to this library at the first place:

1. Component-based - it allows you to write a component which encapsulates its own styles.
 
2. No class name bugs- styled-components generates unique class names for your styles. You never have to worry about duplication, overlap or misspellings.
 
3. Easier deletion of CSS - it can be hard to know whether a class name is used somewhere in your codebase. Styled-components makes it obvious, as every bit of styling is tied to a specific component. If the component is unused (which tooling can detect) and gets deleted, all its styles get deleted with it.

4. Simple dynamic styling - adapting the styling of a component based on its props or a global theme is simple and intuitive without having to manually manage dozens of classes (this I will explain in the next post).

5. Painless maintenance - you never have to hunt across different files to find the styling affecting your component, so maintenance is a piece of cake no matter how big your codebase is.

6. Good old CSS - you style your component using good old CSS rules and properties, which makes it easy to write. 

I hope I made you want to try **styled-components** already and we can go deeper into learning and using them in my next post :)

Thank you for reading my blog. Feel free to connect on [LinkedIn](https://www.linkedin.com/in/olenadrugalya/) or [Twitter](https://twitter.com/OlenaDrugalya) :)

<a href='https://ko-fi.com/J3J42JOOA' target='_blank'><img height='12' width=30% style='border:0px;height:12px;' src='https://cdn.ko-fi.com/cdn/kofi1.png?v=2' border='0' alt='Buy Me a Coffee at ko-fi.com' /></a>