Chloe

Posted on Apr 1, 2020

Styling in Gatsby

#help #gatsby #javascript

I'm new to Gatsby so this may be silly question but here goes. I'm building a site with some pages created from markdown with createPages API all setup and working as it should but I have a question around styling.

I have few pages in the main navbar and I'd like to style each with a different colour just to differentiate between them. Is there a way to do this? If so how? This is the template I setup to create the pages:

import React from 'react'
import Layout from '../layouts/baselayout'
import { graphql } from 'gatsby'

const pagesTemplate = ({ data }) => {
  const page = data.markdownRemark
  return (
    <Layout>
      <div> <-- add something here to change colour??  -->
        <h2 style={{ textTransform: `uppercase` }}>{page.frontmatter.title}</h2>
        <div dangerouslySetInnerHTML={{ __html: page.html }} />
      </div>
    </Layout>
  )
}

export default pagesTemplate

export const query = graphql`
  query($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      html
      frontmatter {
        title
      }
    }
  }
`

Would I need to create separate layouts? Or could I use some JS to say if page title is home color:red if contact color: blue etc

On a separate note has anyone ever used Tailwind with Gatsby?

Any suggestions would be appreciated.

Top comments (10)

Emma Goto 🍙 • Apr 1 '20

You can do stuff like this using React CSS:

<div style={{backgroundColor: "red"}}></div>

Chloe • Apr 1 '20

Thanks for the reply. Yep I thought that but it will still change every page and I'd like a different colour for each one if possible. Would I need separate layout templates?

Emma Goto 🍙 • Apr 1 '20

Maybe something like this would work:

 // find some way of identifying what page you're on, e.g. using the slug
const pageName = blah;

<div style=`{{backgroundColor: ${getBackGroundColor(pageName)}}}`></div>

And then have a function:

const getBackgroundColor = (name) => {
    if (name === "blog") {
        return "red"
    }
    return "white";
}

Chloe • Apr 1 '20

I was thinking something like that just wasn't sure if it would work. I will give a whirl thanks. 🙂

Pacharapol Withayasakpunt • Apr 1 '20

For a something more complex, I would consider emotion, but I am starting to hate it, because of lack of Preact support.

Emma Goto 🍙 • Apr 1 '20

Yeah I'm a bit confused about how to do CSS in JS for Preact too! Although I think Preact lets you use React libraries via some sort of compatibility tooling/setting, right?

Chloe • Apr 1 '20

I've never used preact (not sure what it is...) so not worried about that I considered something like emotion reading docs seems like it would work but overkill for a bit of styling... Changing colours really isn't that complicated.. At least it shouldn't be.

Emma Goto 🍙 • Apr 1 '20

Yeah I think doing inline styles is totally fine in this scenario but if you're planning on doing a lot of styling across your blog something like styled-components or emotion makes life a little bit easier (for me at least!)

Chloe • Apr 2 '20

Yep makes sense I may look into that at a later date so good to know. Thanks.

Mateusz Iwaniuk • Apr 5 '20 • Edited

Gatsby works perfect with the styled components library styled-components.com/

Answering your question above: if you want to create a div with specified styles, you can create a Div component

const Div = styled.div'
background: blue;
'

Where instead of ' ' you use` ` but I can't apply this in the comment:/

And then you pass <Div>...</Div> instead of simple <div>...</div>

The other way is to use CSS modules gatsbyjs.org/docs/css-modules/

And you can also just style by className. Yes, that' so simple

I hope I could help 💥

DEV Community

Styling in Gatsby

Top comments (10)

Read next

Build Live Code Editor Clone with HTML, CSS and JavaScript

Horóscopo com IA: Uma Experiência com Next.js e Gemini

JavaScript vs. Deno, Vite 6, Astro 5, and more

LeetCode Meditations: Merge Intervals