Intro to Styled Components for your React App

#webdev #javascript #react #beginners

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:

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:

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:

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:

Component-based - it allows you to write a component which encapsulates its own styles.
No class name bugs- styled-components generates unique class names for your styles. You never have to worry about duplication, overlap or misspellings.
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.
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).
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.
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 or Twitter :)

Top comments (5)

dastasoft • Feb 10 '21

Nice article!

I use styled-components by default in most of my projects but there are a few downsides to mention:

The resultant CSS can be bigger than doing in regular CSS, adds a lot of prefixes (which in fact it's also a good point because you have great compatibility between browsers)
Hot reload works better with plain CSS, in a CRA if you only change things in CSS the page don't get reloaded, with styled-components or any other CSS-in-JSS needs to compile again.
Like in other tools like TailwindCSS I find styled-components need to be used by a person who has a good sense of organization because it's easier to repeat things if you don't have care

Aside from the downsides I think styled-components are a very handy tool.