Styling with CSS

In this section, we will learn how to implement CSS styling into our Gatsby project.
There are two different methods to adding global CSS styling to our Gatsby site – creating
a wrapper component or using gatsby-browser.js.

Creating a wrapper component
The idea behind a wrapper component is to wrap our page components in another
component that brings common styles to the page:

  1. Create StyleWrapper.css in your components folder:
    html {
    background-color: #f9fafb;
    font-family: -apple-system, “Segoe UI”, Roboto,
    Helvetica, Arial, sans-serif,
    “Apple Color Emoji”, “Segoe UI Emoji”, “Segoe UI
    Symbol”;
    }

In the preceding code, we are defining a background color and a font family that all
children of the HTML tag can inherit.

  1. Let’s now add some h1 styles to this file:
    h1 {
    color: #2563eb;
    size: 6rem;
    font-weight: 800;
    }
    Here, we are adding the color, size, and weight of the largest heading tag.
  1. Similarly, we can also add some styles for the p and a tags:
    p {
    color: #333333;
    }
    a {
    color: #059669;
    text-decoration: underline;
    }
    Here, we are adding a color to each tag and, in the case of the a tags, an underline
    to make them more prominent.

4. Create StyleWrapper.js in your components folder:

import React from “react”
import “./StyleWrapper.css”
const StyleWrapper = ({children}) => (
{children}
)
export default StyleWrapper

As the name might suggest, we will use this component to wrap our pages to apply the styles we are importing on the second line

. In order to use StyleWrapper.js, we need to import it into our pages; let’s look
at pages/index.js as an example:
import React from “react”
import {Link} from “gatsby”
import StyleWrapper from “../components/StyleWrapper”
export default function Index(){
return (
Styling with CSS 35
About me

)
}

In the preceding code, we can see we have imported the styled wrapper on the
third line. We then replaced the div wrapping with our new layout component.
The contained h1, p, and Link elements will be passed into the StyleWrapper
component as children

close

Stay Connected

We don’t spam! Read our privacy policy for more info.

Leave a Comment

Your email address will not be published. Required fields are marked *

Shopping Cart