DEV Community

Cover image for Convert the Gatsby default starter to use styled-components
Scott Spence
Scott Spence

Posted on • Updated on • Originally published at


Convert the Gatsby default starter to use styled-components

Photo by CHU TAI on Unsplash

Let's go through getting styled-components working with the Gatsby default starter.

In this example we're going to use the Gatsby default starter you get with CodeSandbox and add in styled-components, so first up, open a new CodeSandbox and select Gatsby from the SERVER TEMPLATES.

1. Dependencies

In the dependencies section of the CodeSandbox editor you'll need to add the following:

Enter fullscreen mode Exit fullscreen mode

2. Config

Now we need to change gatsby-config.js to incorporate the new dependencies we've just added. It doesn't have any configuration options so it can just go in as an extra line on the config, in this case I'm adding it after the gatsby-plugin-sharp plugin:

Enter fullscreen mode Exit fullscreen mode

Don't forget the comma at the end πŸ‘

3. Global Style

Now that we're ready to rock n' roll with styled-components we need to remove the currently applied styled in the default starter and apply our own.

In the src/components/layout.js component there's an import for layout.css this is the CSS reset for the starter if we remove the import from here we'll see the styles for border and font be reset. We can now delete the layout.css file and create out own CSS reset using the createGlobalStyle function from styled-components.

Create a new folder theme, in this example it's in src/theme and add a globalStyle.js file in there.

This will export a GlobalStyle component for us to use throughout the app.

Let's add in a Google font and reset the padding and margin, for visual feedback we're going to add the font directly to the body element.

import { createGlobalStyle } from 'styled-components'

export const GlobalStyle = createGlobalStyle`
  @import url(',700');
  body {
    padding: 0;
    margin: 0;
    font-family: Kodchasan;
  a {
    text-decoration: none;
  ul {
    margin: 0 auto;
    list-style-type: none;
Enter fullscreen mode Exit fullscreen mode

Ok, now we can use the export component here to apply styles globally in the app. So we need to have this as high up the component tree as possible, in this case that is in the layout.js component as it wraps all the pages in this project.

In layout.js import the GlobalStyle component.

import Header from './header'
import { GlobalStyle } from '../theme/globalStyle'
Enter fullscreen mode Exit fullscreen mode

Then add it in with the other components being rendered.

render={data => (
    <GlobalStyle />
Enter fullscreen mode Exit fullscreen mode

Ok! Global styled applied, we should now see the font change and the margin around the body of the page change.

Time to use styled-components!

4. Use styled-components

Now let's convert all the inline styles used in the starter to styled-components.

This is the actual styling part, which is moving the existing styles to styled components, working from top to bottom of the file structure, changing:

Enter fullscreen mode Exit fullscreen mode


import React from 'react'
import { Link } from 'gatsby'
import styled from 'styled-components'

const HeaderWrapper = styled.div`
  background: rebeccapurple;
  margin-bottom: 1.45rem;

const Headline = styled.div`
  margin: 0 auto;
  max-width: 960;
  padding: 1.45rem 1.0875rem;
  h1 {
    margin: 0;

const StyledLink = styled(Link)`
  color: white;
  textdecoration: none;

const Header = ({ siteTitle }) => (
        <StyledLink to="/">{siteTitle}</StyledLink>

export default Header
Enter fullscreen mode Exit fullscreen mode


import React from 'react'
import PropTypes from 'prop-types'
import Helmet from 'react-helmet'
import { StaticQuery, graphql } from 'gatsby'

import styled from 'styled-components'

import Header from './header'
import { GlobalStyle } from '../theme/globalStyle'

const ContentWrapper = styled.div`
  margin: 0 auto;
  maxwidth: 960;
  padding: 0px 1.0875rem 1.45rem;
  paddingtop: 0;

const Layout = ({ children }) => (
      query SiteTitleQuery {
        site {
          siteMetadata {
    render={data => (
        <GlobalStyle />
            { name: 'description', content: 'Sample' },
            { name: 'keywords', content: 'sample, something' }
          <html lang="en" />
        <Header siteTitle={} />

Layout.propTypes = {
  children: PropTypes.node.isRequired

export default Layout
Enter fullscreen mode Exit fullscreen mode


import React from 'react'
import { Link } from 'gatsby'
import styled from 'styled-components'

import Layout from '../components/layout'
import Image from '../components/image'

const ImgWrapper = styled.div`
  max-width: 300px;
  margin-bottom: 1.45rem;

const IndexPage = () => (
    <h1>Hi people</h1>
    <p>Welcome to your new Gatsby site.</p>
    <p>Now go build something great.</p>
      <Image />
    <Link to="/page-2/">Go to page 2</Link>

export default IndexPage
Enter fullscreen mode Exit fullscreen mode

5. Done

Thanks for reading πŸ™

Here's the example code we worked on if you need reference. πŸ‘€πŸ‘Œ

If there is anything I have missed, or if there is a better way to do something then please let me know.

This was originally posted on my gatsby blog you can view it here please take a look at my other content if you enjoyed this.

Follow me on Twitter or Ask Me Anything on GitHub.

Top comments (1)

aaronago profile image
Aaron Gottlieb

Very helpful. Thanks!

Top Posts from the React Ecosystem

1. Changes In The Official React Documentation

The former React Docs Beta has been officially released as the updated React documentation at after years of hard work and refinement. Check out the brand new React Docs: What’s New in the Updated React Docs

2. CRA's Time is Over

React developer team has removed create-react-app (CRA) from official documentation rendering it no longer the default setup method for new projects. The bulky setup, slow, and outdated nature of CRA led to its removal: create-react-app is officially dead

3. How to Fetch Articles for Your Portfolio

Integrate the articles of your profile into your personal portfolio with either React, Vue, or Next.js by following these simple steps. It outlines how to include frontend to pull the information and correctly utilizes the API: How to Fetch Your Articles for Your Portfolio with React