Styled Components

All styles are good except the tiresome kind.
Voltaire

In our previous article, we saw how to design a very simple Card component with raw CSS.

Now, CSS has a few issues: it’s global, it can easily be overridden by another CSS statement anywhere in your app, it can be polluted by a library you import, it’s not dynamic and not colocated with your component which is not really “the React way”.

There have been numerous attempts at trying to solve the CSS issues, from patterns such as BEM, SMACSS, to more complex architectures such as CSS Modules. They are all fine, but they don’t push the React logic to its logical conclusion: the styles should be colocated within the Component, and shouldn’t be able to leak or produce side-effects.

Enter Styled Components and its multiple variations (Emotion, Glamorous, Aphrodite etc.), where you can put your styling directly in your Component and produce small re-usable and styled components.

In this article, we are going to tweak our Card component to use Styled Components.

Adding the Styled Components dependency (commit)

From your Terminal, and from the root of your project, do:

yarn add styled-components

This will add the styled-components dependency to your project.

Upgrading the Card component (commit)

Then, open the src/Components/Card/index.js file, and modify it like so:

As you can see in the code above, we did a few things here.

First, we removed the CSS import at the top. We no longer need it, as we will be styling our components using Styled Components.

Then we created to components, Container and Content, replacing the divs we used to have inside the Card component.

We no longer use HTML DOM elements such as div, span directly, we create Components that are based on these raw elements but with some added styles.

As you can see on line 4, we used a very special syntax to ask the styled-components library to provide us with a Component that is a div with the specified styles.

Now, we wanted our colours (text and border colours) to be dynamic and change depending on what was given as a prop. Styled Components make this very easy indeed, as you can see on line 8 and 12: you can access the props using a function within the template.

Upgrading the rest of the app

App.js (commit)

Now that we’ve upgraded our Card component to Styled Components, we might just want to go the extra mile and get rid of all remaining CSS.

We’ll start with the App.js file, and replace our container div by the following component:

const Container = styled.div`
  display: flex;
  margin: 30px;
  > * {
    margin-right: 20px;
  }
`;

The only thing worth mentioning here is the > * part: this syntax means that it should apply the styles within the curly braces (the margin-right in that case) to all direct children of the Container. In our case, that would be each Card.

Global Styles (commit)

In index.css, we had some global styles, styling the body .

Although using global styles is generally discouraged, having some global styles for body or font faces is ok.

To add global styles, import the injectGlobal function from styled-components like so:

import { injectGlobal } from 'styled-components';
injectGlobal`
  body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
  }
`;

Then just import this file into your application entry point (index.js usually):

import './global-styles';

And you are good to go.

You can now delete all the .css files and your app should just work as before!