Styling in Gatsby with VSCode

When it comes to styling in Gatsby, it allows one to style with css, less, scss, etc. I wanted to keep things simple for the time being and will use css and just copy what I have for the header in my blog to see how it will look like in Gatsby. It will be a way to find out the amount of work it will require for me to just create the header layout of my blog.

Getting started

Let’s choose a clean template of Gatsby without any pages etc. Gatsby provides us with the hello-world template which is the minimal template. We will start the template by executing the command below.

Gatsby provides us with a way to create global styling by adding the style reference file into gatsby-broswer.js. Lets create a global.css file and add the html and body css styles. We will create a folder in src/styles and also create a file called global.css inside of it.

Your folder will look like below in vscode.

Below is the content of global.css, I copied the html and body styles into this file from my blog.

Now we will need to add gatsby-browser.js file so that it can apply this style globally to our site. The file resides on the root folder where you will also find gatsby-config.js

We also need to edit the file to tell it where our global.css file is residing.

Now we will have the global style that we have applied to our site.

Gatsby component module styling

Gatsby allows us to use css modules out of the box. We will be using css modules for our header, we will create a header.js file inside of the src/components folder.

I will now copy and paste my header source into the header.js file. Below I have replaced with Link and I am also passing in a prop into my function, so that I can use the data that will be passed in. I have also replaced the css class to use className rather.

As you can see there are a lot of css elements here and wordpress generates a lot of stuff by default. Not necessary clean html I guess.

Now let’s create our style for our header.js file, we will create a file called header.module.css inside the components folder.

Now we need to modify our header.js file to use these css styles. By default I am using kebab-case for my css, and in our javacript code I can refer to the style by camel casing e.g main-nav becomes mainNav.

Below you will see the clean version of the header.js file where I imported the style and used it in the component.

You may see something funky above where I use join for two styles. In React you need to use an array and join it with two styles in order for it to have two styles in one component. One of the nice thing about using modules is that all the css styles will be unique to the site, so no conflict at all. e.g headerStyles.logoDefault will be converted by Gatsby to header-module–logo-default–1YbkP.

Launching the site

Finally we need to modify our src/pages/index.js and use our Header file inside of it. We will also pass in 2 properties into Header, the title and tagline of our blog.

Finally lets launch the develop server and view how it looks like.

Summary

We covered styling using global styles and also how to use components modules css to style a component. How Gatsby will auto generate css unique code so that there are no conflicts between other components and styles. I hope you see that by default your code will be quite clean by gatsby. Next up we will try to cover more the body and footer for the blog.