Style

Can add /style folder, css files, then import globally in gatsby-browser.js

Check out the docs

CSS Modules

This seems different than pure React CSS modules

If you console.log the imported style, you see it just maps to globally unique name generated

{
    container: "about-css-modules-module—container—bPeug"
}

src/components/container.js

import React from "react"
import containerStyles from "./container.module.css"

export default ({ children }) => (
  <div className={containerStyles.container}>{children}</div>
)

src/components/container.module.css

.container {
  margin: 3rem auto;
  max-width: 600px;
}

.container:hover {
  background-color: rebeccapurple;
}

pages/test.js

import React from "react"
import styles from "./about-css-modules.module.css" //add custom css here too
import Container from "../components/container"

export default () => (
  <Container>
    <h1>About CSS Modules</h1>
    <p>CSS Modules are cool</p>
  </Container>
)

Need .module.css suffix to tell Gatsby its a module

CSS-in-JS

https://speakerdeck.com/vjeux/react-css-in-js

Its a thing