The 3 essentials to get started with styled-components

This post was originally posted in my personal site.

I love styled-components. I use this library for all my personal projects (including my personal site). 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.

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:

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

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

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

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:

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.

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:

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:

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:

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:

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 just as usual:

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:

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...

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:

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:

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

That will make the text blue:

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

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.

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:

import { createGlobalStyle } from "styled-components";

Write your global styles:

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:

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:

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.

Thanks for reading ❤️

Comments

[John Hillert]

We access our styled components writing S. and then the name of the component.

Ok, so I followed the pattern for a few years, I think because I read this exact article or one just like it when I was learning to be a developer. Here is my question. How do you get this to work with TypeScript. I've tried all sorts of ways to type an object of as-yet unknown styled components and it kills code completion in vs code.

This is what I mean by kills code completion.