Using Styled-Components with Gatsby.js

Yes, there are probably thousands of how-to’s about Styled-Components, but in this article, I’ll try to cover my own way to get acquainted with this CSS in JS styling. It is recommended to have a basic understanding of React before moving any further.

Step 1: Install gatsby-plugin-styled-components

To install, open a new terminal window and run the following code in your Gatsby.js project.

Use your favorite package manager.

npm install gatsby-plugin-styled-components styled-components babel-plugin-styled-components

yarn add styled-components gatsby-plugin-styled-components babel-plugin-styled-components

Now that we've installed a plugin, we need to configure Gatsby to use it.

Open up your gatsby project, and then add it to your site’s gatsby-config.js:

module.exports = {
  plugins: [`gatsby-plugin-styled-components`],
}

Step 2: Add Global Styles

Styled-components are primarily used for a single CSS class that is isolated from other components. In some cases, you want to override global styling — for example, the default margins of your body element. Styled-components has your back. You can use the createGlobalStyle to accomplish this.

We need to create global styles file and add some styles in it. In this case I'll create Global.js in following path src/styles/Global.js

You might want to:

• Set a font-family for all your typography
• Set the background color on every page
• Override some browser default styling

import { createGlobalStyle } from "styled-components";
import "@fontsource/rubik/400.css";
import "prism-theme-night-owl";

const GlobalStyle = createGlobalStyle`

{/* Add Your Global Styles */}

body {
    margin: 0;
    padding: 0;
    background: #EFEFEF;
    font-family: 'Rubik', sans-serif;
  }
`;

export default GlobalStyle;

It’s advised to use createGlobalStyle in Layout src/components/Layout.js component, which are shared over multiple pages rather than using it on a single page.

import React from "react";
import PropTypes from "prop-types";

import GlobalStyle from "../styles/Global";
import Theme from "../styles/Theme";
import { ThemeProvider } from "styled-components";

const Layout = ({ children }) => (
  <SiteRoot>
    <GlobalStyle />
    <ThemeProvider theme={Theme}>
        {children}
    </ThemeProvider>
  </SiteRoot>
);

Layout.propTypes = {
  children: PropTypes.node.isRequired,
};

export default Layout;

Step 3: Theming

Styled-components has full theming support by exporting a <ThemeProvider> wrapper component. This component provides a theme to all React components underneath itself via the context API.

As you see in Layout.js we imported ThemeProvider from styled-components.

In the render tree, all styled-components will have access to the provided theme, even when they are multiple levels deep.

Let's create a Theme.js file in our styles folder that holds some variables in it.

const Theme = {
  colors: {
    red: "#EF402F",
    grey: "#EFEFEF",
    black: "#000000",
  },
  fonts: {
    rubik: `'Rubik', sans-serif`,
  },
  sizes: {
    mobile: "600px",
    tablet: "900px",
  },
};
export default Theme;

Step 4: Usage

We've made the perfect gatsby.js starter with styled-component JS in CSS library. Now time to start using it. For this example, I'll quickly style a button.

const Button = styled.button`
  color: ${(props) => props.theme.colors.red};
  border: 2px solid ${(props) => props.theme.colors.black};
  background: ${(props) => props.theme.colors.grey};
  font-family: ${(props) => props.theme.fonts.rubik};
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border-radius: 3px;
  @media (max-width: ${(props) => props.theme.sizes.mobile}) {
    padding: 0.20em 0.5em;
  }
`;

Conclusion

Adding styled-components to your Gatsby.js project is not difficult, and can be a real game-changer. If you want to see all the amazing things it can do, visit styled-components documentation.