Introduction to Styling in Gatsby

In this part, you’re going to explore options for styling Gatsby websites and dive deeper into using React components for building sites.

Every site has some sort of global style. This includes things like the site’s typography and background colors. These styles set the overall feel of the site — much like the color and texture of a wall sets the overall feel of a room.

One of the most straightforward ways to add global styles to a site is using a global stylesheet.

✋ Create a new Gatsby site

Start by creating a new Gatsby site. It may be best (especially if you’re new to the command line) to close the terminal windows you used for and start a new terminal session for part two.

Open a new terminal window, create a new “hello world” Gatsby site in a directory called tutorial-part-two, and then move to this new directory:

You now have a new Gatsby site (based on the Gatsby “hello world” starter) with the following structure:

✋ Add styles to a CSS file

Create a .css file in your new project:

You should now have a structure like this:

Define some styles in the global.css file:

Note: The placement of the example CSS file in a /src/styles/ folder is arbitrary.

✋ Include the stylesheet in gatsby-browser.js

Create the gatsby-browser.js Your project’s file structure should now look like this:

Import your recently-created stylesheet in the gatsby-browser.js file:

Note: Both CommonJS (require) and ES Module (import) syntax work here. If you’re not sure which to choose, import is usually a good default. When working with files that are only run in a Node.js environment however (like ), require will need to be used.

Start the development server: If you take a look at your project in the browser, you should see a lavender background applied to the “hello world” starter:

So far, we’ve talked about the more traditional approach of using standard CSS stylesheets. Now, we’ll talk about various methods of modularizing CSS to tackle styling in a component-oriented way.

Let’s explore CSS Modules. Quoting from:

A CSS Module is a CSS file in which all class names and animation names are scoped locally by default.

CSS Modules are very popular because they let you write CSS normally but with a lot more safety. The tool automatically generates unique class and animation names, so you don’t have to worry about selector name collisions.

Gatsby works out of the box with CSS Modules. This approach is highly recommended for those new to building with Gatsby (and React in general).

✋ Build a new page using CSS Modules

In this section, you’ll create a new page component and style that page component using a CSS Module.

First, create a new Container component.

Create a new directory at src/components and then, in this new directory, create a file named container.js and paste the following: You’ll notice you imported a CSS module file named container.module.css. Let’s create that file now.
Create a new page component by creating a file atsrc/pages/about-css-modules.js: Now, if you visit , your page should look something like this:

✋ Style a component using CSS Modules

In this section, you’ll create a list of people with names, avatars, and short Latin biographies. You’ll create a <User /> component and style that component using a CSS module.

Paste the following into the new file:
Import the new src/pages/about-css-modules.module.css file into the about-css-modules.js page you created earlier by editing the first few lines of the file like so: The console.log(styles) code will log the resulting import so you can see the result of your processed ./about-css-modules.module.css file. If you open the developer console (using e.g. Firefox or Chrome’s developer tools, often by the F12 key) in your browser, you’ll see:

If you compare that to your CSS file, you’ll see that each class is now a key in the imported object pointing to a long string e.g. avatar points to src-pages——about-css-modules-module—-avatar—-2lRF7. These are the class names CSS Modules generates. They’re guaranteed to be unique across your site. And because you have to import them to use the classes, there’s never any question about where some CSS is being used.

Create a new <User /> component inline in the about-css-modules.js pagecomponent. Modify about-css-modules.js so it looks like the following:

The finished page should now look like:

CSS-in-JS is a component-oriented styling approach. Most generally, it is a pattern where .

Using CSS-in-JS with Gatsby

There are many different CSS-in-JS libraries and many of them have Gatsby plugins already. We won’t cover an example of CSS-in-JS in this initial tutorial, but we encourage you to what the ecosystem has to offer. There are mini-tutorials for two libraries, in particular, Emotion and .

2. Introduction to Styling in Gatsby