The 3 essentials to get started with styled-components
Tags: react, webdev, css, javascript
Published: 2020-05-10 19:18:20

*This post was originally posted in [my personal site](https://francodalessio.com/the-3-essentials-to-get-started-with-styled-components/).*

I love `styled-components`. I use this library for all my personal projects (including my [personal site](https://francodalessio.com)). It's very **powerful** and also very **easy to use.** In this article I'm going to explain the **3 main things you can do with `styled-components`** so you can start using it right away.

## But first... What exactly is styled-components?

> "styled-components is the result of wondering how we could enhance CSS for styling React component systems"

`styled-components` is a library that allows you to write actual **CSS code to style your components**, removing the mapping between components and styles. It uses tagged **template literals** and **CSS**. That's it.

And this library does everything else for you:

- It keeps **track** of which components are rendered and **injects** their styles.
- It uses **code splitting** so your users load the least amount of code necessary.
- It generates **unique class names** for your styles, so you don't have to worry about duplications or overlaps.
- It makes obvious which styles you are **not using** (because they are tied to a specific component), so you can easily **delete** them. This is usually hard when working with CSS.
- It automatically **prefixes** your CSS for it to work with different vendors. You can just write your CSS to the **current standard** and `styled-components` will handle the rest.

Everything sounds great, but you may be thinking that writing CSS is not enough for you, that you need **dynamic styles**. Well, don't worry, `styled-components` allows you to **style components based on props or global themes** very easily.

Are you ready to start with it? I promise it'll be very easy! Let's see the **3 essential things you can do with this library.**

You can find all the code we'll explain [in this CodeSandbox](https://codesandbox.io/s/get-started-styled-components-548v9).

## 1- Create and use your first styled component

First, you need to **install** the library:

```
npm i --save styled-components
```

Now let's say we want to create a Home page where we display a title in the center of the screen. Something like this:

![A simple page with a centered title to demonstrate the use of styled components](https://dev-to-uploads.s3.amazonaws.com/i/zezp6ruvmwpcq5nbanxv.png)

Very simple. We need a `div` and an `h1` tag. The `div` would have this CSS code:

```css
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
```

And let's say we want the `h1` to be underlined:

```css
text-decoration: underline;
```

Let's do it with `styled-components`!

In order to keep the code well structured, let's create a `components/Home` folder, and two files inside of it: `index.js` and `styles.js`.

Our `styles` file is where we will create our styled components.

Let's start by **importing the library**:

```javascript
import styled from "styled-components";
```

Now, to create a styled component, we need to **write `style.` and then the HTML tag** we want to style. In this case, we first need a `div`, so let's start with that. Also, let's save that component in a variable and **export** it, so we can later import it from our `index` file.

```javascript
export const Home = styled.div``;
```

The only thing left is to write our styles! And since we can write **regular CSS within the backticks**, it's very easy:

```javascript
export const Home = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
`;
```

Congratulations! You've now written your first styled component! 🎉

Let's go ahead and also add our `Title` component, which will be a styled `h1` tag. The whole `styles` file will end up looking like this:

```javascript
import styled from "styled-components";

export const Home = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
`;

export const Title = styled.h1`
  text-decoration: underline;
`;
```

Great! Now we need to **use** these components. In order to do that, we need to **import** them from our `index` files.

We could do this:

```javascript
import React from "react";
import { Home, Title } from "./styles";

export default function Home() {
  return...
}
```

But note that I now have **two components named `Home`**, so this will just not work. One option is to assign different names to your styled components. Instead of calling it `Home`, you can call it `Wrapper`, or `Container`, or something like that.

A lot of people take this approach, and it works. But personally I don't like it. I want to be able to name my styled component the same as the parent component. Fortunately, a lot of people think the same, so someone came up with this other approach, which is the one I like:

```javascript
import React from "react";
import * as S from "./styles";
```

**We can import all of our styled components as a variable called `S`**, and then we are able to render them using that variable. Remember that styled components are just like **regular components**, so you render them using [JSX](https://francodalessio.com/understanding-react-elements-and-jsx/) just as usual:

```jsx
import React from "react";
import * as S from "./styles";

export default function Home() {
  return (
    <S.Home>
      <S.Title>This is the Home page</S.Title>
    </S.Home>
  );
}
```

**We access our styled components writing `S.` and then the name of the component**. I love this approach because now I can call my styled component `Home`, and also **with a quick look I can tell which of the returned components are in fact styled components** (all of them in this case, but that may not be the case for longer, more complex components).

### Nesting styles

Before going to step 2, a quick note on nesting. **You can nest styles just like you do with SASS**. In this case, we could get rid of the `Title` component, for example. We can just add styles for all `h1` existing within our `Home` component:

```javascript
import styled from "styled-components";

export const Home = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;

  h1 {
    text-decoration: underline;
  }
`;
```

And if we change our parent component as well...

```jsx
import React from "react";
import * as S from "./styles";

export default function Home() {
  return (
    <S.Home>
      <h1>This is the Home page</h1>
    </S.Home>
  );
}
```

This will work just fine. It doesn't always make sense to nest styles, but keep in mind that you can do it and you may not need to create a new component.

## 2- Use props for dynamic styling

Remember that **styled components are just components, so they can receive props**. And that props can be useful to **dynamically change the styles**.

Our example is very simple, but let's say we want to **set the color of our title text based on a prop named `titleColor`.**

First, let's pass that prop when we render our `Title` styled component:

```jsx
import React from "react";
import * as S from "./styles";

export default function Home() {
  return (
    <S.Home>
      <S.Title titleColor="blue">This is the Home page</S.Title>
    </S.Home>
  );
}
```

And now let's use that prop to change the text color. We need to use `${}` to get access to the props. It's very simple:

```javascript
export const Title = styled.h1`
  text-decoration: underline;
  color: ${prop => prop.titleColor};
`;
```

That will make the text blue:

![The text is now blue, and we styled it using props](https://dev-to-uploads.s3.amazonaws.com/i/i0e3ol41x2gga9rkwgzj.png)

You can also use props for **conditional styling**. For example, let's say we pass a `small` prop:

```jsx
import React from "react";
import * as S from "./styles";

export default function Home() {
  return (
    <S.Home>
      <S.Title titleColor="blue" small>
        This is the Home page
      </S.Title>
    </S.Home>
  );
}
```

If it's there, we want to make the text smaller. But if it's not, we want the text size to be the regular size.

```javascript
export const Title = styled.h1`
  text-decoration: underline;
  color: ${prop => prop.titleColor};
  font-size: ${prop => prop.small && "1.25rem"};
`;
```

Awesome! You know now how to dynamically style components based on props.

## 3- Create global styles

Creating styled components is great, but sometimes we need **global styles**. You may want to apply styles using tags as selectors. For example, let's say we want to change the **background color of our `body`**.

Fortunately `styled-components` makes this very simple. Start by importing `createGlobalStyle`:

```javascript
import { createGlobalStyle } from "styled-components";
```

Write your global styles:

```javascript
const GlobalStyle = createGlobalStyle`
  body {
    background: lightblue;
  }
`;
```

And then place this component at the **top level** of your application, in my case my `index.js` file:

```jsx
import React from "react";
import ReactDOM from "react-dom";
import { createGlobalStyle } from "styled-components";

import App from "./App";

const GlobalStyles = createGlobalStyle`
  body {
    background: lightblue;
  }
`;

const rootElement = document.getElementById("root");
ReactDOM.render(
  <>
    <GlobalStyles />
    <App />
  </>,
  rootElement
);
```

And that's it! That will change the background color:

![Background color changed using global styles](https://dev-to-uploads.s3.amazonaws.com/i/zl7pfq0jsc3j99dwjzgi.png)

If you want, **you can also use props to dynamically change global styles** (for example, if you have a light and a dark theme in your application).

## That's it!

I hope this post was useful. You now know the **essentials to get started with `styled-components`**. Of course, there's more to it, so be sure to check the [official documentation](https://www.styled-components.com/docs/).

Thanks for reading ❤️