Using Styled Components in React JS

Before You Start

This post assumes you have some experience in

• HTML/CSS and JavaScript
• Creating React components
• Adding packages to your project using npm

During my time as a React Developer, I've seen a few options for adding CSS to React whether it's standard CSS, inline CSS, Sass, etc. Everytime I start a new side project, I find myself questioning whether one choice is better than the other. One option that I found to always to be my favorite from time and time again is styled-components.

What is Styled Components?

Styled Components is a powerful CSS-in-JS library that supports passing props, animations, media templates and theming. In hindsight, we extract our CSS into the JavaScript file and use Styled Components to create a inline component using our declared CSS. This looks better in practice. As we take a look at it, we will start to see how it cleans up our component and why I prefer it over Tailwind/Bootstrap in most cases.

Using Styled Components

Before we start writing any code, we need to install styled-components in our
React application. To do so, type the following command to add it to your project.

npm install --save styled-components

Now go to the component you want to use. For this demostration, this is the component I want to style. It is a simple counter component with two buttons.

import { useState } from "react";

function Counter() {
  const [counter, setCounter] = useState(0);
  const increment = () => setCounter(counter + 1);
  const decrement = () => setCounter(counter - 1);

  return (
    <section>
      <button onClick={decrement}> - </button>
      <p>{counter}</p>
      <button onClick={increment}> + </button>
    </section>
  )
}

export default Counter;

Let's add some styles

First, import styled-components into the component by adding

import styled from 'styled-components';

Now for your first styled component, we are going to declare a variable that will house our "styled" component. Then we'll use the styled variable we declared in our import to create a component using an HTML element. In this case, a HTML button. The last part is a bit weird in terms of syntax, but after the HTML element, you will use backticks to declare your CSS. I believe the reasoning for this is so that we can use actual CSS in our JavaScript code instead of JSS.

const Button = styled.button`
  padding: 0.5rem 1rem;
  background: rebeccapurple;
  color: white;
  border: none;
  cursor: pointer;
`

Lastly, we need to replace the buttons in our component to the new Button component Styled Components created for us. It's as simple as that. What we've achieved here is a clean component using separation of concern inside one file.

Final result:

import { useState } from "react";
import styled from 'styled-components';

const Button = styled.button`
  padding: 0.5rem 1rem;
  background: rebeccapurple;
  color: white;
  border: none;
  cursor: pointer;
`

function Counter() {
  const [counter, setCounter] = useState(0);

  const increment = () => setCounter(counter + 1);
  const decrement = () => setCounter(counter - 1);

  return (
    <section>
      <Button onClick={decrement}> - </Button>
      <p>{counter}</p>
      <Button onClick={increment}> + </Button>
    </section>
  )
}

export default Counter;

Why use it versus Tailwind?

I prefer this tool more than Tailwind or Bootstrap because with these libraries our HTML tends to go through class hell. If you've worked with either you know what I am talk about. Large class lists of different styles to be applied to it the HTML code. This makes it harder to read the code. To piggyback on the practice to limit the amount of JS code used in your HTML portion of your component, I feel the same should go with your CSS.

That being said, I am not saying Tailwind and Bootstrap are bad, they are great for rapid prototyping, but for long-term maintainability, we should avoid long class lists.

If you have any questions and concerns or other topics you want me to talk about, leave a comment. Thanks for reading.