Gatsby Styling

I. Styling in Gatsby

Here are some options for styling in Gatsby:

• Inline styles
• Global CSS
• CSS Modules
• Styled-Components
• Bootstrap, Tailwind, etc

II. Inline styles

We can use inline styles in our components.

Inline styles can be written as attributes in the opening tag of a JSX element:

<h1 style={{ color: 'red' }}>Hello world</h1>

III. Global CSS

We can create a global CSS file for our project.

For example, in the src directory, we create a CSS folder and then create layout.css in that folder.

src
├── css
│   └── layout.css

h1 {
    color: blue;
    text-align: center;
}

We can then import the layout.css file into our layout.js component.

import "../css/layout.css"

Note: Inline style is always stronger than global CSS.

IV. CSS Modules

While the Global style is useful for small projects, it can be annoying if the project gets bigger because we’ll need to think of different className.

CSS Modules scope CSS locally to that file.

For example, we create a src/css/blog.module.css

.page {
  background: pink;
}

.page h1 {
  color: white;
  text-align: center;
}

.text {
  text-transform: capitalize;
}

In src/pages/blog.js

• Import exact classes in blog.module.css module
• Wrap all elements in <div>
• Add className

import React from 'react'
import Layout from "../components/Layout"
import {page, text} from "../css/blog.module.css"

const Blog = () => {
    return (
        <Layout>
            <div className={page}>
                <h1>This is our blog page</h1>
                <p className={text}>Hello there.</p>
            </div>
        </Layout>
    )
}

export default Blog

We can also import all without naming each class using \*.

import React from 'react'
import Layout from "../components/Layout"
import * as blogStyle from "../css/blog.module.css"

const Blog = () => {
    return (
        <Layout>
            <div className={blogStyle.page}>
                <h1>This is our blog page</h1>
                <p className={blogStyle.text}>Hello there.</p>
            </div>
        </Layout>
    )
}

export default Blog

V. Styled-Components

Styled-components are a CSS-in-JS framework that offers different features for styling components in a practical and reusable way.

The concept of styled-components is quite similar to CSS Modules in that it copes CSS to a particular component.

1. Install

We can install a Gatsby plugin for styled-component

npm install gatsby-plugin-styled-components styled-components babel-plugin-styled-components

Plugin page: https://www.gatsbyjs.com/plugins/gatsby-plugin-styled-components/

2. How to use

To use style-component, we need to edit gatsby-config.js

module.exports = {
  plugins: [ `gatsby-plugin-styled-components`],
}

3. Example

In this example, we will create a button.js component.

import styled from "styled-components"

export const ExampleButton = styled.button`
    background: black;
    color: white;
    font-size: 2rem;
`

We can then use the Button component anywhere we want. For example, we can use it in index.js

import React from 'react'
import Layout from "../components/layout"
import { ExampleButton } from "../components/button"

const Home = () => {
  return (
    <Layout>
      <h2>Hello World</h2>
      <ExampleButton>Click Me</ExampleButton>
    </Layout>
  )
}

export default Home