Global Styles in gatsby-browser

In addition to importing CSS files, we can also add a global stylesheet.

Create a folder under src called styles with a file called styles.css.

Add a class called layout-container:

.layout-container {
  margin: 3rem auto;
     max-width: 650px;
     padding: 0 1rem;
}

Go back to Layout.js and add className="layout-container" to the div.

If we refresh the page, nothing changes. We actually need to tell Gatsby where this file lives.

Create a file at the root of the project called gatsby-browser.js. This file is where changes to the client side of the build live. Import that global stylesheet in this file:

import "./src/styles/styles.css"

Restart the development server with gatsby develop. Note that any time you change a configuration file, you'll need to restart the server. You should now see the layout-container class being used on the page.

Let's do an assignment in the next video to help this stick.

Helpful Links

• Gatsby Docs: Creating global styles