How to Use and Style React Components in Gatsby?

Gatsby is a popular static site generator that leverages React for building user interfaces. React components play a crucial role in Gatsby, allowing developers to create reusable UI elements and manage the state effectively. This article explores how to use and style React Components in Gatsby.

Steps to create and set up a Gatsby application

Step 1: Install Gatsby CLI

npm install -g gatsby-cli

Step 2: Create a New Gatsby Site

gatsby new my-gatsby-site

Step 3: Navigate to Your Project Directory

cd my-gatsby-site

Folder structure:

Dependencies:

"dependencies": {
    "gatsby": "^5.13.5",
    "gatsby-plugin-google-fonts": "^1.0.1",
    "gatsby-plugin-image": "^3.13.1",
    "gatsby-plugin-manifest": "^5.13.1",
    "gatsby-plugin-sharp": "^5.13.1",
    "gatsby-source-filesystem": "^5.13.1",
    "gatsby-transformer-sharp": "^5.13.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "prettier": "^2.8.8"
  },

Styling React Components in Gatsby Using CSS Modules

CSS Modules provide a way to scope CSS to specific components, avoiding global styles conflicts.

Example: Create a CSS module file named header.module.css in the src/components/ directory and apply the styles to the Header component.

/* src/components/header.module.css */
.header {
  background-color: green;
  color: white;
}

// src/components/Header.js
import React from 'react';
import {header} from './header.module.css';

const Header = () => {
  return (
    <header className={header}>
      <h1>Welcome to My Gatsby Site</h1>
    </header>
  );
};

export default Header;

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

const IndexPage = () => {
  return (
    <div>
      <Header />
      <main>
        <p>Hello, Geek!</p>
      </main>
    </div>
  );
};

export default IndexPage;

Steps to run the project:

npm run start

Output:

yuvrajghule281

Follow

Improve

Article Tags :

• Web Technologies
• ReactJS
• Gatsby