An Intro to React Styled Components

Introduction

React Styled Components is an easy way to incorporate styling into your React components. It has a very low entry level for developers that are familiar with CSS that haven’t yet been exposed to design libraries such as Bootstrap or Ant Design. Additionally, it is very lightweight to set up in your application and get started with, which you will see demonstrated below. Using styled components eliminates the need for using in-line styling in your React rendering, so it further helps remove the HTML content from the styling content of your document.

Using Styled Components

Assuming you already have a React app running, getting started with Styled Components is very simple. First, we’ll start by installing dependencies from npm:

npm install styled-components

And then we’ll need to import styled components into our app, right along with importing React:

import React from ‘react’;
import styled from ‘styled-components;

To use styled components, we must create a variable that will hold the styling we want for any DOM element we will use with styled components, and initialize with with styled.<element>``. Between our backticks we can add as much CSS as we need for that component, and it will look almost exactly like CSS when written. Let’s start with a simple button and paragraph tag, and then we’ll add responsive styling for that button.

const PinkPTag = styled.p`
   background-color: pink;
   font-weight: bold;
`;

Above, we are creating a variable and initializing it with ‘styled.p’, and then writing what will later be converted to CSS, exactly as we would write CSS in a stylesheet. The p in the ‘styled.p’ declaration means that any PinkPTag in our HTML body or React components will effectively render as normal HTML <p> tags, with any styling tacked on.

const Button = styled.button`
   border-radius: 5px;
   border: 4px solid red;
   background-color: lightblue;
   font-weight: normal;
   font-size: 24px;
   color: red;
`;

Buttons and any other HTML element can created with styled components in the same way we created the styled paragraph tag. The button above doesn’t have any effects when clicked or when being hovered over, but those effects can be added. First, though, let’s take a look at how we add these styled components to our apps.

<div>
   <PinkPTag>This paragraph and button were formatted with styled 
   components!</PinkPTag>
   <Button>Click Me!</Button>
</div>

The resulting paragraph and button from the styled components created above.

Similarly to adding CSS to static HTML elements with styled components, adding CSS effects to html elements looks very close to what it would look like in a CSS stylesheet. Below, a hover effect has been added to our red and blue button that will change the button’s colors and font weight when hovered over.

const Button = styled.button`
   border-radius: 5px;
   border: 4px solid red;
   background-color: lightblue;
   font-weight: normal;
   font-size: 24px;
   color: red;
   :hover {
      border: 4px solid blue;
      background-color: red;
      font-weight: bold;
      color: lightblue;
   }
`;

The hover effect changes the styling of the button when it is hovered over.

Conclusion

While working with styled components may be a tad more labor-intensive to work with if implementing a full website than a library like Bootstrap or Ant Design, it is a great tool to know how to use if you are working on minor stylistic changes inside of smaller React components. The base knowledge needed is simply a basic working understanding of CSS, and styled components will help elevate your React apps to another level!