Categories
Gatsby.js

Gatsby.js — Styling Components

Spread the love

Gatsby is a static web site framework that’s based on React.

We can use it to create static websites from external data sources and more.

In this article, we’ll look at how to create a site with Gatsby.

Styling with CSS

We can add global styles into the src/styles/global.css file:

html {
  background-color: green;
}
p {
  color: maroon;
}

Then in gatsby-browser.js , we add:

import "./src/styles/global.css"

to import the global styles.

Then the styles will be applied everywhere

Layout Styles

We can add the styles to the layout file so that they can be applied to all the child components.

For example, we can write:

src/components/layout.css

html {
  background-color: green;
}
p {
  color: maroon;
}

src/components/layout.js

import { Link } from "gatsby"
import React from "react"
import './layout.css'

export default function Layout({ children }) {
  return (
    <div style={{ margin: `0 auto`, maxWidth: 650, padding: `0 1rem` }}>
      <Link to='/foo'>foo</Link>
      <Link to='/bar'>bar</Link>
      {children}
    </div>
  )
}

src/pages/bar.js

import React from "react"
import Layout from "../components/layout"

export default function Bar() {
  return <Layout>
    <div>bar</div>
  </Layout>
}

src/pages/foo.js

import React from "react"
import Layout from "../components/layout"

export default function Bar() {
  return <Layout>
    <div>bar</div>
  </Layout>
}

Then the styles will be applied to the Foo and Bar pages.

Styled Components

We can use the Styled Components library to create styled components with Gatsby.

To do this, we run:

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

to install the required packages.

Then in gatsby-config.js , we write:

/**
 * Configure your Gatsby site with this file.
 *
 * See: https://www.gatsbyjs.com/docs/gatsby-config/
 */

module.exports = {
  /* Your site config here */
  plugins: [`gatsby-plugin-styled-components`],
}

to add the plugin into our project.

Then we can use it by writing:

src/pages/index.js

import React from "react"
import styled from "styled-components"
const Container = styled.div`
  margin: 3rem auto;
  max-width: 700px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
`
const Avatar = styled.img`
  flex: 0 0 100px;
  width: 96px;
  height: 96px;
  margin: 0;
`
const Username = styled.h2`
  margin: 0 0 12px 0;
  padding: 0;
`
const User = props => (
  <>
    <Avatar src={props.avatar} alt={props.username} />
    <Username>{props.username}</Username>
  </>
)
export default function UsersList() {
  return (
    <Container>
      <User
        username="Jane Doe"
        avatar="https://s3.amazonaws.com/uifaces/faces/twitter/adellecharles/128.jpg"
      />
      <User
        username="Bob Jones"
        avatar="https://s3.amazonaws.com/uifaces/faces/twitter/vladarbatov/128.jpg"
      />
    </Container>
  )
}

We create the Container component which is a styled div.

Avatar is a styled image. And Username is a styled h2 component.

User has the combination of the Avatar and Username components.

CSS Modules

We can use CSS modules in our Gatsby project.

To use it, we can write:

src/pages/index.module.css

.feature {
  margin: 2rem auto;
  max-width: 500px;
  color: red;
}

src/pages/index.js

import React from "react"
import style from "./index.module.css"
export default function Home() {
  return (
    <section className={style.feature}>
      <h1>hello world</h1>
    </section>
  )
}

We just import the CSS as a module into our component.

Then we can apply the classes by accessing the style import as an object with the class name as the property name.

Conclusion

We can style our components in various ways with Gatsby.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

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