Using gatsby-browser.js

Using gatsby-browser.js
If you want the same styles applied to every page, you might feel that importing
StyleWrapper on all page instances doesn’t feel like you’re following Don’t Repeat
Yourself (DRY) principles. In cases where you are absolutely sure the styles are needed
on every page, we can add them to our application using the Gatsby browser instead:

  1. Create a styles folder inside your src directory. As these styles are being
    used globally and are not tied to a specific component, it does not make sense
    to store them in the component directory, as we did when implementing
    StyleWrapper.js
  1. Create a global.css file in your styles folder and add the following:
    html {
    background-color: #f9fafb;
    font-family: -apple-system, “Segoe UI”, Roboto,
    Helvetica, Arial, sans-serif,
    “Apple Color Emoji”, “Segoe UI Emoji”, “Segoe UI
    Symbol”;
    }
    h1 {
    color: #2563eb;
    size: 6rem;
    font-weight: 800;
    }
    p {
    color: #333333;
    }

a {
color: #059669;
text-decoration: underline;
}

Here, we are adding the exact same styles that we had in the alternate CSS
implementation, so I won’t explain them again here. The key difference is in this
next step.

  1. Navigate to gatsby-browser.js and add the following:
    import “./src/styles/global.css”
    By importing our CSS in gatsby-browser.js, Gatsby will wrap every page with
    this CSS.
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