How to start working with Styled Components in React

I recently learned about styled-components and how to use them. In this article I want to share my insights of how to overcome some common struggles, if you are new to styled-components. I really like the concept of this React library that allows you to do the styling directly in your React component. So, what are the benefits?

The Benefits of using Styled Components

• Well first of all, you have all the code concerning a component in one place. No jumping back and forth between different files any longer.
• It makes your code very organized and if you decide to no longer use a component, you just remove it from your code-files. There’s no dead code elimination in the CSS needed.
• All JavaScript functionalities are available to you. You can use if-statements, calculate and access different variables. It’s easy to customize your code by using JavaScript props.

The Downsides (Spoiler: There aren’t any)

In my opinion there’s nothing that should stop you from using styled-components as long as you set up your system in a smooth way.

Dev-Tools behaviour

When you start working with styled-components, you will quickly notice, that you can’t identify your html-elements by class-names any longer. That’s quite annoying, when you want to work in the dev-tools. Fortunately there is a fix for that:

• Install the Babbel plug in: npm install --save-dev babel-plugin-styled-components
• if you are using create-react-app then you should use import styled from 'styled-components/macro'; instead of import styled from 'styled-components'; inside your component. More Details

Dev-tools showing styled-components-name as class-name

Syntax

Styled-components require writing pseudo CSS code in backticks (``) which makes VSCode treat them as a string. And therefore you lose the CSS-syntax-highlighting and auto-complete. In order to gain it back, you should install this extension for VSCode and everything looks like you are used from your CSS-files again.

CSS-syntax-highlighting on styled-components

How to deal with …

With styled-components you will do all your CSS-magic in one place, so here are some ways to apply additional styling like hover effects and animations to your code.

… hover effects?

Just add &:hover {//your CSS};to your styled-component

Hover-effect in styled-component

… media queries?

You can use Media queries the same way as you would do it in CSS.

Media Queries in styled-components

… animations?

1. Start by importing keyframes from the library like this:

import styled, { keyframes } from "styled-components" (or from "styled-components/macro" if you work with create-react-app)

2. Define the animation pretty much like any other component:

const YourAnimation = keyframes ` //Your CSS`

3. And finally call the animation like this:

animation: ${YourAnimation} duration ...;

That’s it!

Applying these concepts of styled-components will hopefully help to get you started.