How to use styled components in Gatsby
Tags: gatsby, react
Published: 2021-02-03 10:37:42

---
title: How to use styled components in Gatsby
published: true
date: 2021-01-24 00:00:00 UTC
tags: gatsby, react
canonical_url: https://www.mariokandut.com/how-to-use-styled-components-in-gatsby/
---

When starting a new Gatsby project, there are several options for styling available, SCSS/SASS, CSS-in-JS, inline-css, good-old plain CSS, CSS frameworks like Bootstrap, Bulma, Tailwind or ...! **styled-components** is one of the most popular CSS-in-JSS solutions out there, and behold, I have good news, **It works flawlessly with Gatsby**.

I assume you already have a working Gatsby project running and are looking how to implement styled-components in Gatsby.

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#installation)Installation

Installing styled-components is an easy two-step process.

### [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#1-install-the-dependencies)1. Install the dependencies

The first step is to install the needed dependencies:

- **styled-components** : The main styled-components framework. It was build for React and can automatically handle SSR, automatic vendor prefixing, easy-deletion of CSS, dynamic styling, etc. (see [styled-components docs](https://styled-components.com/docs)).
- **gatsby-plugin-styled-components** : The official Gatsby.js plugin for styled components. Otherwise, the styled-components won't be rendered, when you build your site.
- **babel-plugin-styled-components** : This plugin adds support for server-side rendering, minification of styles, and a nicer debugging experience.

```
npm i styled-components gatsby-plugin-styled-components babel-plugin-styled-components
```

### [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#2-add-the-plugin-to-your-gatsby-config)2. Add the plugin to your Gatsby config

The second and final step is adding the plugin into the Gatsby configuration `gatsby-config.js`.

```
// if you want to change the default options
{
  resolve: `gatsby-plugin-styled-components`,
  options: {
    // ssr: false
    // displayName: false,
    // minify: false
    // see docs
  },
}

// If you don't want to change defaults
`gatsby-plugin-styled-components`
```

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#usage)Usage

**styled-components** utilises tagged **template literals** to style your components. It removes the mapping between components and styles.

This basically means that when you're defining your styles, you're actually creating a normal React component, that has your styles attached to it.

### [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#basic-example)Basic example

This basic example writes `Hello World` in white on a black background. Look at the components in the `render`.

```
const Title = styled.h1`
  font-size: 2em;
  text-align: center;
  color: white;
`;

const Wrapper = styled.section`
  padding: 2em;
  background: black;
`;
// render styled components
render(
  <Wrapper>
    <Title>Hello World!</Title>
  </Wrapper>,
);
```

### [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#adapt-based-on-props)Adapt based on props

You can adapt the styles based on props. In the example below, the color of the button changes based on the primary prop.

```
const Button = styled.button`
  /* Adapt based on primary prop */
  background: ${props => (props.primary ? 'black' : 'white')};
  color: ${props => (props.primary ? 'white' : 'black')};

  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

render(
  <div>
    <Button>Normal</Button>
    <Button primary>Primary</Button>
  </div>,
);
```

### [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#extending-styles)Extending Styles

You can also extend existing styles in your component.

```
const Button = styled.button`
  color: black;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid black;
  border-radius: 3px;
`;

// A new component based on Button, but with some styles override
const RedButton = styled(Button)`
  color: red;
  border-color: red;
`;

render(
  <div>
    <Button>Normal Button</Button>
    <RedButton>Red Button</RedButton>
  </div>,
);
```

**YaY** , 🥳🥳🥳. Well done. You know the basics of styled-components and Gatsby.

For more examples, check out the official docs from **styled-components** [here](https://styled-components.com/docs/basics#getting-started).

Thanks for reading and if you have any **questions** , use the **comment** function or **send me a message** **[@mariokandut](https://www.twitter.com/mariokandut)**.

References (and Big thanks):[styled-components](https://styled-components.com/docs), [Daniel](https://www.digitalocean.com/community/tutorials/gatsbyjs-using-styled-components-in-gatsbyjs)