Gatsby Styles

Gatsby lets you fashion your additives and pages with the use of various strategies, offering flexibility in the way you cope with CSS and styling to your undertaking. This can range from conventional CSS files to fashionable CSS-in-JS libraries. we will discuss how can we add styles to the Gatsby application.

These are the following approaches:

Steps to Create Gatsby Application

Step 1: Create a Gatsby Project

If you haven't already, create a new Gatsby project.

npx gatsby new my-gatsby-site
cd my-gatsby-site

Step 2: Install the Gatsby Plugin for CSS

npm install gatsby-plugin-postcss

Step 3: Configure the Plugin

// gatsby-config.js
module.exports = {
  plugins: [
    `gatsby-plugin-postcss`,
  ],
}

Step 4: Import the CSS File

// gatsby-browser.js
import "./src/styles/styles.css"

Project structure:

Updated Dependencies:

 "dependencies": {,
    "gatsby": "^2.23.1",
    "gatsby-cli": "^2.11.5",
  },

Global CSS Files

This is the most traditional manner of making use of styles, wherein you write your CSS in a .Css record and hyperlink it globally on your Gatsby venture. These styles will be applied to each element and page until scoped using classes or IDs. Create a styles.Css document. Import it in gatsby-browser.Js or without delay in the thing.

Example: This example shows the use of Global CSS file for styling the Gatsby application.

// src/styles/global.css
body {
  background-color: #f4f4f4;
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

h1 {
  color: #333;
}

p {
  color: #666;
}

// src/pages/index.js
import React from 'react';
import Layout from '../components/Layout';

const HomePage = () => (
  <Layout>
    <p>This is an example of Global CSS in Gatsby.</p>
  </Layout>
);

export default HomePage;

// src/components/Layout.js

import React from 'react';

const Layout = ({ children }) => (
  <div>
    <header>
      <h1>Global CSS Example</h1>
    </header>
    <main>{children}</main>
  </div>
);

export default Layout;

// gatsby-browser.js
import './src/styles/global.css';

Output:

CSS Modules

CSS Modules permit you to write CSS this is scoped locally to a particular aspect. This prevents the patterns from leaking to other components of the software. Create a CSS report with a .Module.Css extension. Import the CSS module into your thing and apply the patterns.

Example: This example shows the use of CSS module for styling the Gatsby application.

// src/components/layout.module.css
.header {
  background-color: #282c34;
  color: white;
  padding: 20px;
}

.paragraph {
  color: #61dafb;
  padding: 10px;
}

// src/pages/index.js
import React from 'react';
import Layout from '../components/Layout';

const HomePage = () => (
  <Layout>
    <p className={styles.paragraph}>This is an example of CSS Modules in Gatsby.</p>
  </Layout>
);

export default HomePage;

// src/components/Layout.js
import React from 'react';
import styles from './layout.module.css';

const Layout = ({ children }) => (
  <div>
    <header className={styles.header}>
      <h1>CSS Modules Example</h1>
    </header>
    <main>{children}</main>
  </div>
);

export default Layout;

Output:

Conclusion

Gatsby gives a number of styling options to suit distinct desires and possibilities. Whether you select worldwide CSS, CSS Modules, or CSS-in-JS, Gatsby’s flexibility guarantees you can put into effect the styling method that works first-class on your assignment. By know-how the professionals and cons of every approach, you can make an informed selection that complements both your development revel in and the very last person enjoy.

Gatsby gives a big range of styling options, permitting developers to choose the exceptional method primarily based on their undertaking's desires and preferences. Whether you opt for conventional strategies like Global CSS or more contemporary strategies like CSS-in-JS, Gatsby's flexibility guarantees that you could attain the favored look and sense on your website online. Global CSS is simple and straightforward but may lead to style conflicts.