Convert the Gatsby default starter to styled-components

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:

1gatsby-plugin-styled-components
2styled-components
3babel-plugin-styled-components

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:

1'gatsby-transformer-sharp',
2'gatsby-plugin-sharp',
3'gatsby-plugin-styled-components',

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.

1import { createGlobalStyle } from 'styled-components'
2
3export const GlobalStyle = createGlobalStyle`
4  @import url('https://fonts.googleapis.com/css?family=Kodchasan:400,700');
5  body {
6    padding: 0;
7    margin: 0;
8    font-family: Kodchasan;
9  }
10  a {
11    text-decoration: none;
12  }
13  ul {
14    margin: 0 auto;
15    list-style-type: none;
16  }
17`

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.

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

Then add it in with the other components being rendered.

1render={data => (
2  <>
3    <GlobalStyle />
4    <Helmet
5    ...

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:

1src/components/header.js
2src/components/layout.js
3src/pages/index.js

header.js

1import React from 'react'
2import { Link } from 'gatsby'
3import styled from 'styled-components'
4
5const HeaderWrapper = styled.div`
6  background: rebeccapurple;
7  margin-bottom: 1.45rem;
8`
9
10const Headline = styled.div`
11  margin: 0 auto;
12  max-width: 960;
13  padding: 1.45rem 1.0875rem;
14  h1 {
15    margin: 0;
16  }
17`
18
19const StyledLink = styled(Link)`
20  color: white;
21  textdecoration: none;
22`
23
24const Header = ({ siteTitle }) => (
25  <HeaderWrapper>
26    <Headline>
27      <h1>
28        <StyledLink to="/">{siteTitle}</StyledLink>
29      </h1>
30    </Headline>
31  </HeaderWrapper>
32)
33
34export default Header

layout.js

1import React from 'react'
2import PropTypes from 'prop-types'
3import Helmet from 'react-helmet'
4import { StaticQuery, graphql } from 'gatsby'
5
6import styled from 'styled-components'
7
8import Header from './header'
9import { GlobalStyle } from '../theme/globalStyle'
10
11const ContentWrapper = styled.div`
12  margin: 0 auto;
13  maxwidth: 960;
14  padding: 0px 1.0875rem 1.45rem;
15  paddingtop: 0;
16`
17
18const Layout = ({ children }) => (
19  <StaticQuery
20    query={graphql`
21      query SiteTitleQuery {
22        site {
23          siteMetadata {
24            title
25          }
26        }
27      }
28    `}
29    render={data => (
30      <>
31        <GlobalStyle />
32        <Helmet
33          title={data.site.siteMetadata.title}
34          meta={[
35            { name: 'description', content: 'Sample' },
36            { name: 'keywords', content: 'sample, something' },
37          ]}
38        >
39          <html lang="en" />
40        </Helmet>
41        <Header siteTitle={data.site.siteMetadata.title} />
42        <ContentWrapper>{children}</ContentWrapper>
43      </>
44    )}
45  />
46)
47
48Layout.propTypes = {
49  children: PropTypes.node.isRequired,
50}
51
52export default Layout

index.js

1import React from 'react'
2import { Link } from 'gatsby'
3import styled from 'styled-components'
4
5import Layout from '../components/layout'
6import Image from '../components/image'
7
8const ImgWrapper = styled.div`
9  max-width: 300px;
10  margin-bottom: 1.45rem;
11`
12
13const IndexPage = () => (
14  <Layout>
15    <h1>Hi people</h1>
16    <p>Welcome to your new Gatsby site.</p>
17    <p>Now go build something great.</p>
18    <ImgWrapper>
19      <Image />
20    </ImgWrapper>
21    <Link to="/page-2/">Go to page 2</Link>
22  </Layout>
23)
24
25export default IndexPage

5. Done

Thanks for reading

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