DEV Community

Chloe
Chloe

Posted on

Styling in Gatsby

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
      }
    }
  }
`
Enter fullscreen mode Exit fullscreen mode

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.

Sentry image

See why 4M developers consider Sentry, β€œnot bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (10)

Collapse
 
emma profile image
Emma Goto πŸ™ β€’

You can do stuff like this using React CSS:

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

Collapse
 
cguttweb profile image
Chloe β€’

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?

Collapse
 
emma profile image
Emma Goto πŸ™ β€’

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";
}
Thread Thread
 
cguttweb profile image
Chloe β€’

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

Thread Thread
 
patarapolw profile image
Pacharapol Withayasakpunt β€’

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

Thread Thread
 
emma profile image
Emma Goto πŸ™ β€’

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?

Thread Thread
 
cguttweb profile image
Chloe β€’

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.

Thread Thread
 
emma profile image
Emma Goto πŸ™ β€’

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!)

Thread Thread
 
cguttweb profile image
Chloe β€’

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

Collapse
 
iwaniukooo11 profile image
Mateusz Iwaniuk β€’ β€’ 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 πŸ’₯

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free β†’

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay