Convert the Gatsby default starter to styled-components

4 minutes to read
learningguidegatsbygetting started

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.

Expand to watch.

1. Dependencies

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


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:


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;

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'

Then add it in with the other components being rendered.

render={data => (
<GlobalStyle />

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:



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


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


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

5. Done

Thanks for reading

Here’s the example code we worked on if you need reference. 👀

a cheeky butt

Sign up for the newsletter

Want to keep up to date with what I'm working on?

Important dev related content, directly to your inbox (for free).

I care about the protection of your data. Read my Privacy Policy.