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:

gatsby-plugin-styled-components
styled-components
babel-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:

'gatsby-transformer-sharp',
'gatsby-plugin-sharp',
'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.

import { createGlobalStyle } from 'styled-components';

export const GlobalStyle = createGlobalStyle`
  @import url('https://fonts.googleapis.com/css?family=Kodchasan:400,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 />
    <Helmet
    ...

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:

src/components/header.js
src/components/layout.js
src/pages/index.js

header.js

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 }) => (
  <HeaderWrapper>
    <Headline>
      <h1>
        <StyledLink to="/">{siteTitle}</StyledLink>
      </h1>
    </Headline>
  </HeaderWrapper>
);

export default Header;

layout.js

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 }) => (
  <StaticQuery
    query={graphql`
      query SiteTitleQuery {
        site {
          siteMetadata {
            title
          }
        }
      }
    `}
    render={data => (
      <>
        <GlobalStyle />
        <Helmet title={data.site.siteMetadata.title} meta={[{ name: 'description', content: 'Sample' }, { name: 'keywords', content: 'sample, something' }]}>
          <html lang="en" />
        </Helmet>
        <Header siteTitle={data.site.siteMetadata.title} />
        <ContentWrapper>{children}</ContentWrapper>
      </>
    )}
  />
);

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

export default Layout;

index.js

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 = () => (
  <Layout>
    <h1>Hi people</h1>
    <p>Welcome to your new Gatsby site.</p>
    <p>Now go build something great.</p>
    <ImgWrapper>
      <Image />
    </ImgWrapper>
    <Link to="/page-2/">Go to page 2</Link>
  </Layout>
);

export default IndexPage;

5. Done

Thanks for reading

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

You can read other articles like this on my blog.

Let's use the React Context API to change theme in an app!

But first, some context! ?

Ok terrible puns aside let's have a look at what the React Context API is for and what it does. There's a great one liner from the React docs...

Context provides a way to pass data through the component tree without having to pass props down manually at every level.

Or in other words, you can use the React Context API to avoid prop drilling if you need more detail on the concept then please do check out the links provided.

I've previously gone over implementing the React Context API in my Gatsby blog which I documented as I did it; you can see how that went here.

Explain the Context API to me.

A great resource on explaining the API can be found from @leighchalliday with a great usecase on the subject.

What we're doing...

For this post we're going to extend the example we created for styled-components getting started as it has the majority of the code we'll need to get started with the React Context API.

We're going to extend that example to manage the theme state of the example application.

So in summary:

• Scaffold out basic CreateReact App
• Use styled-components ? for styling
• Add themes to switch between with the React Context API
• Use the React Context API!

What we'll need...

All we'll be needing is an internet connection and a modern web browser! Because we're going to do all of this online in the awesome CodeSandbox!

If you have a GitHub account or not, CodeSandbox will let you get started coding straight away!

Versions:

This guide is being used with the following dependency versions.

• react: 16.4.2
• react-dom: 16.4.2
• react-scripts: 1.1.4
• styled-components: 3.4.5

Let's start

So let's go over theming the basic create react app again, this time instead of adding state into to the component we will use the React Context API to manage the state for us. There will be people that will argue that this is a bit overkill for a theme switch but it is given as an example of when to use the Context API in the React documentation so I will let you decide on the validity of that point. For this example, I hope it will give you a clearer picture of how to use the Context API in an application.

Dependencies

Open a React CodeSandbox and add styled-components as a dependency:

File structure

Another area for bikeshedding is file structure, in this scenario we're adding folders for components, contexts and the theme please feel free to structure your files how you see fit, this is how we're going to do it for this example ❤️

Add the directories into the src folder so we can add in some components, the file structure should look something like this:

context-demo/
├─ public/
├─ src/
│  └─ components/
│  └─ contexts/
│  └─ theme/
└─ package.json

Scaffold out a basic Create React App

Ok, so, what we're going to do is add in an App.js component to the components folder then use that in the src/index.js file.

The App.js component can be a stateless functional component as for this example as we're going to be handling state with the Context API.

Here you can see my sketchy typing as I create the directories and add in the App.js component.

We can then remove the style.css file and reference in src/index.js as we're going to be styling with styled-components ? and then use our App.js component:

Ok, so the reason why I have abstracted the App.js component out of the src/index.js file is so that when we come to using the Context API we can add it to the highest level in our app, which is src/index.js.

What about the rest?

So this isn't really the Create React App, as we're using CodeSandbox instead, I have gone over the basic styling used in the styled-components getting started post so it's time to refer to that to mimic the styles we need.

That means what we're going to do, rather than go into depth on the styling of each of the component parts that make up the basic Create React App appearance, we're going to re-use components, so there's going to be a bit of copy pasting involved now.

The Create React App boilerplate code has one file that we go over styling in the styled-components getting started post which is the App.js file, the others are left or deleted, the basic style of App.js is:

App.css

.App {
  text-align: center;
}

.App-logo {
  animation: App-logo-spin infinite 20s linear;
  height: 80px;
}

.App-header {
  background-color: #222;
  height: 150px;
  padding: 20px;
  color: white;
}

.App-title {
  font-size: 1.5em;
}

.App-intro {
  font-size: large;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Use styled components for styling

Now we're going to recreate the styles from the App.css file with styled-components, let's list them out here and go through them:

AppWrapper
AppHeader
AppTitle
rotate360
AppLogo
# We're adding our own styles for
AppIntro
Underline
StyledHyperLink
Button

AppWrapper is the top level wrapper which in a larger component could be used for layout with CSS Grid or Flexbox, in our case we're going to align the text center.

Straightforward enough, right? Now the majority of the rest of the components will use the styled-components ThemeProvider which is what we're going to pass our theme to from the Context API.

Add themes to switch between with the React Context API

Ok, we need to define some themes to pass to the ThemeProvider, we're going to define several theme aspects we want to change, these are going to be:

primary; // colour
secondary; // colour
danger; // colour
fontHeader; // font
fontBody; // font

Create a file to contain the theme object in the theme directory and call it globalStyle.js and add in the following:

import { injectGlobal } from 'styled-components';

export const themes = {
  theme1: {
    primary: '#ff0198',
    secondary: '#01c1d6',
    danger: '#e50000',
    fontHeader: 'Old Standard TT, sans, sans-serif',
    fontBody: 'Nunito, sans-serif',
  },

  theme2: {
    primary: '#6e27c5',
    secondary: '#ffb617',
    danger: '#ff1919',
    fontHeader: 'Enriqueta, sans-serif',
    fontBody: 'Exo 2, sans, sans-serif',
  },

  theme3: {
    primary: '#f16623',
    secondary: '#2e2e86',
    danger: '#cc0000',
    fontHeader: 'Kaushan Script, sans, sans-serif',
    fontBody: 'Headland One, sans-serif',
  },
};

injectGlobal`
  @import url('
    https://fonts.googleapis.com/css?family=
    Old+Standard+TT:400,700|
    Nunito:400,700'|
    Enriqueta:400,700|
    Exo+2:400,700|
    Kaushan+Script:400,700|
    Headland+One:400,700|
  ');

  body {
    padding: 0;
    margin: 0;
  }
`;

Ok, so nothing really happening there apart from setting up the styles for use later.

You will notice that injectGlobal is being used here, this is where we're setting the fonts for use throughout the app, injectGlobal should be used once in an app to set global styles like this.

Onwards! Let us now focus on getting the basic app styles into the App.js component. We can now start using the ThemeProvider in App.js. To do this, for now, to get some visual feedback we're going to apply one of the themes from the themes object in globalStyle.js this is so, as we are adding in components we can see the theme being applied.

We can do this now with the AppHeader which is a styled div:

const AppHeader = styled.div`
  height: 12rem;
  padding: 1rem;
  color: ${({ theme }) => theme.dark};
  background-color: ${({ theme }) => theme.primary};
`;

You will notice here that we're beginning to use the styled-components, theme props but, if we paste this code in now there won't be any change until the ThemeProvider is passed the theme object so we're going to wrap App.js with the ThemeProvider component so that any component encapsulated by the ThemeProvider is able to receive theme props.

AppTitle is going to be a h1 so:

const AppTitle = styled.h1`
  font-family: ${({ theme }) => theme.fontHeader};
`;

For the spinning React logo we can use the asset used previously in the styled-components getting started example

We can add it in with the imports at the top of the App.js component and add it into the AppLogo styled component as an img tag:

const logo = `https://user-images.githubusercontent.com/
    234708/37256552-32635a02-2554-11e8-8fe3-8ab5bd969d8e.png`;

The keyframes helper will need to be imported alongside the ThemeProvider for the animation on the react logo.

const rotate360 = keyframes`
  from { 
    transform: rotate(0deg); 
  }
  to { 
    transform: rotate(360deg); 
  }
`;

const AppLogo = styled.img`
  animation: ${rotate360} infinite 5s linear;
  height: 80px;
  &:hover {
    animation: ${rotate360} infinite 1s linear;
  }
`;

Shared components

Shared components are covered in the styled-components getting started guide if you need more information, for this example we're going to bring in the final couple of components as shared ones for the StyledHyperLink and Button in src/Shared.js add the following:

src/Shared.js

import styled, { css } from 'styled-components';

export const Button = styled.button`
  padding: 0.5rem 1rem;
  margin: 0.5rem 1rem;
  color: ${({ theme }) => theme.primary};
  font-size: 1rem;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  border: 2px solid ${props => props.border};
  background-color: Transparent;
  text-transform: uppercase;
  border-radius: 4px;
  transition: all 0.1s;
  &:hover {
    transform: translateY(1px);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
  }
  ${props =>
    props.primary &&
    css`
      background: ${({ theme }) => theme.primary};
      border: 2px solid ${({ theme }) => theme.primary};
      color: white;
    `};
  ${props =>
    props.danger &&
    css`
      background: ${({ theme }) => theme.danger};
      border: 2px solid ${({ theme }) => theme.danger};
      color: white;
    `};
  &:hover {
    transform: translateY(2px);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
  }
`;

export const StyledHyperLink = styled.a`
  cursor: pointer;
  &:visited,
  &:active {
    color: ${({ theme }) => theme.primary};
  }
  &:hover {
    color: ${({ theme }) => theme.secondary};
  }
  color: ${({ theme }) => theme.primary};
`;

Then import the components like any other:

The last three components for now, AppIntro, Underline and StyledHyperLink:

const AppIntro = styled.p`
  color: ${({ theme }) => theme.dark};
  font-size: large;
  code {
    font-size: 1.3rem;
  }
  font-family: ${({ theme }) => theme.fontBody};
`;

const Underline = styled.span`
  border-bottom: 4px solid ${({ theme }) => theme.secondary};
`;

const StyledHyperLink = SHL.extend`
  text-decoration: none;
  font-family: ${({ theme }) => theme.fontBody};
  color: ${({ theme }) => theme.fontDark};
`;

Add them in under the AppLogo styled component and then we can add the rest of the components into the App function return, so, ready for another copy pasta? Here:

<AppIntro>
  Bootstrapped with{' '}
  <Underline>
    <code>
      <StyledHyperLink
        href={`https://github.com/facebook/create-react-app`}
        target="_blank"
        rel="noopener"
      >
        create-react-app
      </StyledHyperLink>
    </code>
  </Underline>.
</AppIntro>
<AppIntro>
  Components styled with{' '}
  <Underline>
    <code>
      <StyledHyperLink
        href={`https://www.styled-components.com`}
        target="_blank"
        rel="noopener"
      >
        styled-components
      </StyledHyperLink>
    </code>
  </Underline>{' '}
  <span role="img" aria-label="nail polish">
    ?
  </span>
</AppIntro>
<AppIntro>
  Fonts picked with{' '}
  <Underline>
    <code>
      <StyledHyperLink
        href={`https://fontjoy.com/`}
        target="_blank"
        rel="noopener"
      >
        fontjoy.com
      </StyledHyperLink>
    </code>
  </Underline>
</AppIntro>
<Button>Normal Button</Button>
<Button primary>Primary Button</Button>
<Button danger>Danger Button</Button>

Sorry for the code wall! Right paste that in under the closing </AppHeader> tag and we should have the base of what we're going to theme!

Ok? How's it looking?

Now we have a basic React app that uses styled-components!

Use the React Context API

Now for the main event! Here we're going to cover:

Making the theme context.

Using the context API with a component.

Consuming the Context API in multiple components.

So, passing state needlessly through components is what we can use the Context API to avoid. If we take a look at the styled-components getting started example we can see the state being managed in the App.js component and the handleThemeChange function has to be passed to the ThemeSelect component much the same way as any props would need to be passed down. That is a simplified example but it's quite easy to imagine if that component lived on a footer component or a menu item there would be several other components that would need to have the state passed through them that would not actually need that state or props. Make sense?

example

<App>               {/* state begins here */}
  <Header>          {/* through here */}
    <Navigation>    {/* and here */}
      <ThemeSelect> {/* to be used here */}
    </Navigation>
  </Header>
  <Footer/>
</App>

Add the site theme context

In our src/contexts/ directory we're going to make our SiteThemeContext.js, import React and define and export our context:

import React from 'react';

export const SiteThemeContext = React.createContext();

So what is a context?

A context is made up of two things, a provider and a consumer, you have a single provider which will sit up as high as possible in the component tree so that multiple consumers can get the state and props from the provider.

Hopefully you recall the point at which we abstracted the function App component out of the src/index.js file, this is so we could add in the context provider at the highest level of the app, in the src/index.js file. This means that any consumer within the app, no matter how deep into the component tree it is, it can get the state and props from that top level.

Now to create a provider, the provider is a regular React component, so:

import React from 'react'

export const SiteThemeContext = React.createContext()

export class SiteThemeProvider extends React.Component {
  render() {
    return (
      <SiteThemeContext.Provider value={}>
        {this.props.children}
      </SiteThemeContext.Provider>
    )
  }
}

What is being returned by <SiteThemeProvider> is the <SiteThemeContext.Provider> and the children of that component, the one prop you have to provide the the provider is a value prop. This is the variable that the consumer has access to. The consumer being <SiteThemeContext.Consumer> (more on this shortly).

So what we can do now is have what is passed into value be an object value={{}} so it can store multiple properties of the state and the functions that are defined in SiteThemeContext.

The state for the context needs to be the theme so we need to import the theme from src/theme/globalStyle and add that to the state, we're going to default the theme (and state) to theme1 and add a copy of that into the value prop by spreading into state ...❤️, it should look like this:

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

import { themes } from '../theme/globalStyle';

export const SiteThemeContext = React.createContext();

export class SiteThemeProvider extends React.Component {
  state = {
    theme: themes['theme1'],
  };

  render() {
    return (
      <SiteThemeContext.Provider
        value={{
          ...this.state,
        }}>
        {this.props.children}
      </SiteThemeContext.Provider>
    );
  }
}

Ok, it's been a while since I've added a gif, time for another one!

And bring in the themes and add state:

Now we can add in a function to the provider to change the theme state based on what has been selected via the handleThemeChange event value:

handleThemeChange = e => {
  const key = e.target.value;
  const theme = themes[key];
  this.setState({ theme });
};

This can then be consumed by any provider that wants to use it, we're going to need to add it into the value prop, like this:

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

import { themes } from '../theme/globalStyle';

export const SiteThemeContext = React.createContext();

export class SiteThemeProvider extends React.Component {
  state = {
    theme: themes['theme1'],
  };

  handleThemeChange = e => {
    const key = e.target.value;
    const theme = themes[key];
    this.setState({ theme });
  };

  render() {
    return (
      <SiteThemeContext.Provider
        value={{
          ...this.state,
          handleThemeChange: this.handleThemeChange,
        }}>
        {this.props.children}
      </SiteThemeContext.Provider>
    );
  }
}

Ok, that is the site theme context component covered, pretty straight forward, right?

What I should mention is that the e in the handleThemeChange function is going to be the event from the theme select box that we're about to make.

Let's go through adding in the function and adding that to the state:

And now we can add the theme provider to src/index.js so anything lower in the dependency tree can access it via a consumer.

Add the theme select

Now we want a want to call the handleThemeChange function that is part of the SiteThemeProvider via the SiteThemeContext! I'm sure this all making perfect sense right now (?) so let's get right in there and define the component that we're going to use to consume the SiteThemeContext.Provider with a ThemeSelect component!

In the src/components directory add a new ThemeSelect.js component, this is where we are going to consume the site theme context with a consumer.

The child of a consumer isn't a component it's a function, so what we're going to need to do is have the theme select inside the return of that function.

Let's first set up the styled-components that will make up the select, which is a select box, some options and a wrapper.

First we'll do it without the consumer then we'll add it in.

ThemeSelect.js

import React from 'react';
import styled from 'styled-components';

import { themes } from '../theme/globalStyle';

const SelectWrapper = styled.div`
  margin: 0rem 0.5rem 0rem 0.25rem;
  padding: 0rem 0.5rem 0rem 0.25rem;
`;

const Select = styled.select`
  margin: 1.5rem 0.5rem;
  padding: 0.25rem 0.5rem;
  font-family: ${({ theme }) => theme.fontBody};
  border: 2px solid ${({ theme }) => theme.secondary};
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  background: ${({ theme }) => theme.foreground};
  border-radius: 4px;
`;

export const SelectOpt = styled.option`
  font-family: ${({ theme }) => theme.fontBody};
`;

const ThemeSelect = props => {
  return (
    <SelectWrapper>
      <Select>
        {Object.keys(themes).map((theme, index) => {
          return (
            <SelectOpt key={index} value={theme}>
              Theme {index + 1}
            </SelectOpt>
          );
        })}
      </Select>
    </SelectWrapper>
  );
};

export default ThemeSelect;

So from this we can list the this themes available to us in the themes object. But that's it, the function to handle the theme change lives on the SiteThemeProvider.

Back to the SiteThemeContext.Consumer as I mentioned earlier the child of a consumer is a function () => () the first section is the value from the provider (<SiteThemeContext.Provider>) so let's take a quick look at what we've previously defined in the provider:

value={{
  ...this.state,
  handleThemeChange: this.handleThemeChange
}}

Available from SiteThemeContext.Provider is the state and a function so any of those items we can extract and pass to the provider, or to put it another way the consumer can access those values.

Here we can use destructuring to pull the handleThemeChange function we need to change the theme.

import React from 'react'

import { SiteThemeContext } from '../contexts/SiteThemeContext'

const ThemeSelect = props => {
  return (
    <SiteThemeContext.Consumer>
      {({ handleThemeChange }) => ()}
    </SiteThemeContext.Consumer>
  )
}

export default ThemeSelect

Currently this isn't going to change the theme because we have that hardcoded into the styled-components ThemeProvider, what we want to do is use a consumer for the currently selected theme in the SiteThemeContext.

Before that we'll also need to add in the onChange event we want to use to pass the event (e) to the handleThemeChange function on SiteThemeContext.

Then in the App component we can import our <SiteThemeContext.Consumer> to consume the theme on the SiteThemeContext state and pass that to the styled-components ThemeProvider.

Want to know more?

As mentioned at the start of this article a great resource is @leighchalliday and his YouTube channel where you can find his great usecase for the React Context API.

There's also the React community on spectrum and styled-components on spectrum.

Example code of the walkthrough is available on CodeSandbox.

Thanks for reading

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

Follow me on Twitter or Ask Me Anything on GitHub.

You can read other articles like this on my blog.

We're going to style the basic create react app with styled-components to look something like this:

But first, preamble✨: I have always struggled with styling sites, it seems to be an aspect of starting web development that is either an afterthought or glossed over. Up until December last year I didn't really like styling anything at all with CSS, it was a chore rather than something I enjoyed doing.

This was until I started using styled-components, when I joined a build to learn project for a Chingu voyage (grad.then() if you're interested) we decided to use a CSS-in-JS package, Marina who was on my team was such an inspiration for me watching how components were styled and really gave me the confidence to start using styled-components.

me with css before

I want to share what I have learned so far by going through styling a basic react application.

There's some basic CSS concepts in this post that I was not aware of before starting out with styled-components that I presume are assumed in styling web pages.

Styling the body element of a site is assumed, so for when you are starting out with a blank canvas there are some defaults for all modern web browsers you add to your site, like leaving font size at 16px (or 1rem) or box-sizing: border-box; there's some packages out there to take care of this for you as well.

Install styled-components

Ok let's bootstrap the basic react application you get when using Create React App with npx, if you already have Create React App installed globally then you can use the command without npx.

npx create-react-app style-with-styled-components
cd style-with-styled-components/
npm i styled-components

Ok, now we have the basic app we can style, thankfully Dan has kindly provided the starting styles for us so let's begin my using them with styled-components.

The way the CRA CSS is laid out, assumes that you will have a corresponding CSS file for each component, which can help with maintaining the CSS and lends to the React idea of having all your files separated into their component parts.

We can start with the App.js file and it's accompanying App.css file. Let's take a look at the App.js first:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}
export default App;

In styled-components we'd create components for each of these elements that replace the aforementioned className's. Ok we can start by migrating our styles into components, let's do one component first to get an idea of where we're going with this.

First, import styled into the App.js module:

import styled from 'styled-components';

Now let's look at <div className="App">, it's the top level div for this component and is what I like to call the wrapper for the component. So let's give it an imaginative name AppWrapper.

Referring to the App.css there is text-align: center; which belongs to this, so:

const AppWrapper = styled.div`
  text-align: center;
`;

So here we have defined the AppWrapper const as a styled.div followed by back ticks inside of the back ticks we can write any regular CSS with the exact same CSS syntax you wold in a normal .css file.

Now that we have our AppWrapper we can replace the top level div on the App.js component.

import React, { Component } from 'react';
import styled from 'styled-components';
import logo from './logo.svg';
import './App.css';
class App extends Component {
  render() {
    return (
      <AppWrapper>
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </AppWrapper>
    );
  }
}
export default App;

styled-components all the things

So let's do that for the remaining four CSS classes, and take a look, I'll define them underneath the AppWrapper here:

const rotate360 = keyframes`
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
`;
const AppLogo = styled.img`
  animation: ${rotate360} infinite 120s linear;
  height: 80px;
`;
const AppHeader = styled.div`
  background-color: #222;
  height: 150px;
  padding: 20px;
  color: white;
`;
const AppTitle = styled.h1`
  font-size: 1.3em;
`;
const AppIntro = styled.p`
  font-size: large;
`;

So first off we've created a variable for the React svg animation, you'll need to import the keyframes helper from styled-components like so:

import styled, { keyframes } from 'styled-components';

this can now be used throughout the App.js component and we can add an on hover selector to any of our styled-components within this module. Here we're going to add it to the AppLogo to keep the super sweet rotating React logo.

const AppLogo = styled.img`
  animation: ${rotate360} infinite 120s linear;
  height: 80px;
  &:hover {
    animation: ${rotate360} infinite 1.5s linear;
  }
`;

Ok, our app shouldn't look any different as we haven't added in our styled-components to the app render() method, so let's do that now.

Let's also change the intro text. You can add a wrapper for the <code> tags something like:

const CodeWrapper = styled.code`
  font-size: 1.3rem;
`;

But if you prefer you can nest selectors within the component, like:

const AppIntro = styled.p`
  color: ${props => props.theme.dark};
  font-size: large;
  code {
    font-size: 1.3rem;
  }
`;

Let's have a look at the render() method now…

render() {
  return (
    <AppWrapper>
      <AppHeader>
        <AppLogo src={logo} alt="logo" />
        <AppTitle>Welcome to React</AppTitle>
      </AppHeader>
      <AppIntro>
        Bootstrapped with <code>create-react-app</code>.
      </AppIntro>
      <AppIntro>
        Components styled with <code>styled-components</code>{' '}
        <EmojiWrapper aria-label="nail polish"></EmojiWrapper>
      </AppIntro>
    </AppWrapper>
  )
}

Now all the classes originally used in App.js have been replaced so there's no need for the import './App.css' mapping, remove that aaaaand! Still no change!! Which is a good thing because at the moment we're swapping out the .css files for styled-components.

Cool, we have now replaced all the css with styled-components, now we can take a look at injectGlobal.

Let's take a look at how the App.js file should look before we move on:

import React, { Component } from 'react';
import styled, { keyframes } from 'styled-components';
import logo from './logo.svg';

const AppWrapper = styled.div`
  text-align: center;
`;

const rotate360 = keyframes`
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
`;

const AppLogo = styled.img`
  animation: ${rotate360} infinite 120s linear;
  height: 80px;
  &:hover {
    animation: ${rotate360} infinite 1.5s linear;
  }
`;

const AppHeader = styled.div`
  background-color: #222;
  height: 12rem;
  padding: 1rem;
  color: white;
`;

const AppTitle = styled.h1`
  font-weight: 900;
`;

const AppIntro = styled.p`
  font-size: large;
  code {
    font-size: 1.3rem;
  }
`;

const EmojiWrapper = styled.span.attrs({
  role: 'img',
})``;

class App extends Component {
  render() {
    return (
      <AppWrapper>
        <AppHeader>
          <AppLogo src={logo} alt="logo" />
          <AppTitle>Welcome to React</AppTitle>
        </AppHeader>
        <AppIntro>
          Bootstrapped with <code>create-react-app</code>.
        </AppIntro>
        <AppIntro>
          Components styled with <code>styled-components</code> <EmojiWrapper aria-label="nail polish" />
        </AppIntro>
      </AppWrapper>
    );
  }
}

export default App;

Style the body with injectGlobal

For styling the body of our react app we currently have the index.css file that is being imported into the mounting point of our app in the index.js file.

To style the body we can use injectGlobal from styled-components which adds the styles directly to the stylesheet.

To do this you bring in the injectGolabl named export from styled-components and add your styles between the back ticks.

The current index.css looks like this:

body {
  padding: 0;
  margin: 0;
  font-family: sans-serif;
}

Let's add a theme folder in the src directory and add a globalStyle.js file where we can keep all our styles we want to use throughout the app, keeping the styles on one place will make changes simpler.

In src/theme/globalStyle.js we'll need to import the injectGlobal named export from styled-components and add the index.css styles into it:

import { injectGlobal } from 'styled-components';

injectGlobal`
  body {
    padding: 0;
    margin: 0;
    font-family: sans-serif;
  }
`;

Ok, now we're adding the body style to the stylesheet directly so there is no need for the index.css file mapping that is in index.js it should look like this now:

import React from 'react' import ReactDOM from 'react-dom'

import App from './App'

import registerServiceWorker from './registerServiceWorker'

ReactDOM.render(<App />, document.getElementById('root'))

registerServiceWorker()

We should still have our nice sans-serif font going on, but let's add in some nice Roboto for the body and Montserrat for the heading in our globalStyle.js module. We can import Google fonts with an @import in injectGlobal and apply Roboto to the body:

injectGlobal`
  @import url(‘https://fonts.googleapis.com/css?family=Montserrat|Roboto');

  body {
    padding: 0;
    margin: 0;
    font-family: Roboto, sans-serif;
  }
`;

Cool now we can add our imported font for or app header, and there's the option if we want all our <h1>'s to use the same font we can add that to the injectGlobal in our globalStyle.js module.

injectGlobal`
  @import url(‘https://fonts.googleapis.com/css?family=Montserrat:400,900|Roboto');
  body {
    padding: 0;
    margin: 0;
    font-family: Roboto, sans-serif;
  }
  h1 {
    font-family: Montserrat;
  }
`;

Then we can adjust the weight on the AppTitle component:

const AppTitle = styled.h1`
  font-weight: 900;
`;

To add the additional styles for fonts like Montserrat and Roboto you can specify them in the @import url() you'll notice that Montserrat has :400,900 after it that is specifying the styles regular (400) and black (900), you can import as many as you like from Google fonts (CDN) but the more you import the longer it will take to load them, if you have a lot of fonts and styles you want in your app then consider adding them to a folder in the project, like:

import Montserrat from './fonts/Montserrat-Regular.ttf';

injectGlobal`@font-face { font-family: Montserrat; src: url(${Montserrat}); }`;

Theming

Themes are often used to change the look and feel of a wide range of things at once. For example, you may have a night and day mode like in Twitter. You can create your own themes in styled-components too.

Use the styled-components ThemeProvider

Now say we want to have several components in our app that use a CSS colour property color: #6e27c5 instead of hard coding it through the app for every component that uses it we can use the styled-components ThemeProvider.

For this we will need to import the ThemeProvider named export from styled-components, then define a theme object where our colour is going to live:

export const theme = {
  primary: '#6e27c5',
};

Let's add the newly created theme to the globalStyle module we created previously.

To make the theme object available throughout the app component we'll wrap our app component in the ThemeProvider and import our awesome theme for use in the ThemeProvider:

import React, { Component } from 'react';
import styled, { keyframes, ThemeProvider } from 'styled-components';
import logo from './logo.svg';
import { theme } from './theme/globalStyle';

// our styled-components

class App extends Component {
  render() {
    return <ThemeProvider theme={theme}>{/* all children can access the theme object */}</ThemeProvider>;
  }
}
export default App;

Now the theme properties can be used as props in our styled-components, let's change the background-color: in the AppHeader component, whilst we're at it let's add a dark: #222 property to our theme object and use that for the color property:

const AppHeader = styled.div`
  height: 12rem;
  padding: 1rem;
  color: ${props => props.theme.dark};
  background-color: ${props => props.theme.primary};
`;

Now we can change our app theme globally

Ok cool, can you change theme?

This is what I was thinking and it turns out you can, there's a great Stack Overflow answer from Max on it.

It got me thinking if you can switch between themes rather than define them for different sections like in the SO answer.

I started off by defining two themes (with imaginative names) in the globalStyle.js module:

export const theme1 = {
  primary: '#ff0198',
  secondary: '#01c1d6',
  danger: '#eb238e',
  light: '#f4f4f4',
  dark: '#222',
};

export const theme2 = {
  primary: '#6e27c5',
  secondary: '#ffb617',
  danger: '#f16623',
  light: '#f4f4f4',
  dark: '#222',
};

Now we need a way to switch between the two theme objects, let's use a select box for them, let's create a components folder and in there make a ThemeSelect.js component, we can worry about refactoring the App.js component when I'm not here :

ThemeSelect.js

import React from 'react';
import styled from 'styled-components';

const Select = styled.select`
  margin: 2rem 0.5rem;
  padding: 0rem 0.5rem;
  font-family: Roboto;
  font-size: 1rem;
  border: 1px solid ${props => props.theme.light};
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  background: ${props => props.theme.light};
  border-radius: 2px;
`;

export const SelectOpt = styled.option`
  font-family: Roboto;
  font-size: 1rem;
`;

class ThemeSelect extends React.Component {
  render() {
    return (
      <div>
        <Select onChange={e => this.props.handleThemeChange(e)}>
          <SelectOpt value="theme1">Theme 1</SelectOpt>
          <SelectOpt value="theme2">Theme 2</SelectOpt>
        </Select>
      </div>
    );
  }
}

export default ThemeSelect;

You've probably noticed the onChange={e => this.props.handleThemeChange(e) event, we're going to add that method to the App.js component along with some state to manage what theme is selected.

App.js

import React, { Component } from 'react';
import styled, { keyframes, ThemeProvider } from 'styled-components';

import logo from './logo.svg';

import { theme1, theme2 } from './theme/globalStyle';
import ThemeSelect from './components/ThemeSelect';

// our lovely styled-components here

class App extends Component {
  state = {
    theme: theme1,
  };
  handleThemeChange = e => {
    let theme = e.target.value;
    theme === 'theme1' ? (theme = theme1) : (theme = theme2);
    this.setState({ theme });
  };
  render() {
    return (
      <ThemeProvider theme={this.state.theme}>
        <AppWrapper>
          <AppHeader>
            <AppLogo src={logo} alt="logo" />
            <AppTitle>Welcome to React</AppTitle>
          </AppHeader>
          <AppIntro>
            Bootstrapped with <code>create-react-app</code>.
          </AppIntro>
          <AppIntro>
            Components styled with <code>styled-components</code> <EmojiWrapper aria-label="nail polish" />
          </AppIntro>
          <ThemeSelect handleThemeChange={this.handleThemeChange} />
        </AppWrapper>
      </ThemeProvider>
    );
  }
}

export default App;

To summarise what we have done with App.js here is, add some state to default to theme1 where the two themes are imported as named exports of the globalStyle.js module.

Add a method to handle the change of the ThemeSelect.js component handleThemeChange this is where we can switch between the two theme objects.

Let's try it out, we should be able to switch between the two themes we've defined now.

Extending styled-components

So far our app hasn't got many styled-components that are similar but what if we were to add some buttons…

export const Button = styled.button`
  font-size: 1rem;
  border-radius: 5px;
  padding: 0.25rem 1rem;
  margin: 0 1rem;
  background: transparent;
  color: ${props => props.theme.primary};
  border: 2px solid ${props => props.theme.primary};
  ${props =>
    props.primary &&
    css`
      background: ${props => props.theme.primary};
      color: white;
    `};
`;

Here I've added a Button component to the globalStyle.js for us to use in the App.js component. For the sake of convenience we're going to add it here, you may find if you have a lot of similar components that you are reusing throughout your app that it may be a good idea to add them all to a components folder.

We can import the Button as you would any other component and use it in the module, as we're extending it this means we only need to apply the specific styles we want for that button. But first in the App.js component we can specify a normal and a primary button:

<button>Normal Button</button> <button primary>Primary Button</button>

Now to specify another button with the same css as the imported button we can extend it, like in this example we'll make the button take up 40% of the screen width and make the corners more rounded:

const BigButt = Button.extend`
  height: 3rem;
  font-size: 2rem;
  width: 40vw;
  border-radius: 30px;
`;

Let's also apply the theme for an underline on create-react-app and styled-components by adding in an Underline styled-component:

const Underline = styled.span`
  border-bottom: 4px solid ${props => props.theme.secondary};
`;

Now we can switch the theme and have it applied to our components using the theme, pretty neat, right?

I have put all of the examples we have gone over here in a working example for you to play around with the theming and styled-components, enjoy.

https://codesandbox.io/s/x26q7l9vyq?from-embed

Want to know more?

A great resource for getting started with styled-components which really helped me is Simon Vrachliotis's egghead.io styled-components playlist which is a great foundation for starting out with styled-components ? the first lesson is for pro members but the rest are currently available to watch for free.

There's also the spectrum.chat community and of course Stack Overflow.

Thanks for reading

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

Find me on Twitter or Ask Me Anything on GitHub.

You can read other articles like this on my blog.