Introduction to React Styled Components

Want to get started with React styled-components? Here is a quick guide to get you started. In this article, I’ll guide you through a quick setup of React styled-components. So you will have a basic understanding of the concept.

Before you get started I’m assuming you have a basic understanding of React, HTML, and CSS.

Getting started

First we need to install the npm dependency. So in your terminal go to the project root and enter the following:

npm install --save styled-components        

Setup the styled-components in React

In the example, I want to style our H1’s blue. Let’s go through the steps.

1. Create a new file H1.js. You can name it whatever, but I find it easiest to name it after the element you style
2. Import styled-components by means of the filename
3. Depending on the element you style, in this case, h1. You export styled.h1 followed by two backticks
4. Within the backticks, you can write regular CSS. In this case: color: blue

The code will look like this:

H1.js

import styled from "styled-components";

export default styled.h1`
    color: blue;
`;        

Using the styled-components in React

Now all you have to do is import the component we created and wrap the text you want to style.

index.js

import React from "react";
import H1 from "./H1";

StyledComponentTest () => {
    return (
        <div>
            <H1> Test Styled Components </H1>
        </div>
    );
}

export default StyledComponentTest;        

Passing Props to your React styled-component

To make your styled component dynamic it’s possible to pass it props. Let’s take the component we made before and use it as an example.

Now instead of the color, we write an arrow function to check if the prop primary is there, and based on that we return either black or blue as a string.

To pass the props, just enter them in the tag of your styled component wrapper.

The code:

H1.js

import styled from "styled-components";

export default styled.h1`
    color: ${props => props.default ? "black" : "blue"};
`;        

index.js

import React from "react";
import H1 from "./H1";

StyledComponentTest () => {
    return (
        <div>
            <H1 default> Test Styled Components </H1>
        </div>
    );
}

export default StyledComponentTest;        

Extending styles of your existing React styled-component

It is also possible to extend the styles of an existing component and keep both. Let’s take again the header example we created earlier.

Now instead of specifying the element, you want to style, add a component you want to extend. Now you can override the existing styles or add additional ones.

Let’s see how this looks in code:

H1.js

import styled from "styled-components";

export default styled.h1`
     color: blue;
`;        

H1-extended.js

import styled from "styled-components";
import H1 from "./H1";

export default styled(H1)`
     color: red;
     font-weight: bold;
`;        

index.js

import React from "react";
import H1Extended from "./H1Extended";

StyledComponentTest () => {
    return (
        <div>
            <H1Extended> Test Styled Components </H1Extended>
        </div>
    );
}

export default StyledComponentTest;        

Conclusion

As you can see it is very easy to set up and work with React styled-components. There is a lot of freedom within the components, like passing props for dynamic styling purposes.

When you want to create your own custom set of components or work with global styles this is the tool for you.

If you plan to work with styled-components have a look at their documentation: styled-components documentation