DEV Community

Discussion on: Styling in Gatsby

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 Author

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 Author

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 Author

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 Author

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