Using global styles about gatsby-plugin-linaria HOT 5 CLOSED

The best place for it is probably your layout file, the one you use for wrapping every page. That way those styles will be included in all pages. You might not even need to assign it to a variable, because I don't know what you would do with it, try to just run:

css`
  :global() {
    /* ... */
  }
`

but I'm not 100% sure about that. The point is that it has to reside in the file which actually runs. Where did you put it?

from gatsby-plugin-linaria.

For me adding it to a page works as well, this is my src/pages/index.js:

import React from 'react'
import { css } from 'linaria'

css`
  :global() {
    html {
      background: black;
      color: #fff;
    }
  }
`

const Home = () => <h1>Hello World!</h1>

export default Home

I hope you'll figure it out.

from gatsby-plugin-linaria.

It works for me, please provide steps to reproduce (or better yet, a repo).

Btw, I'm not sure why their example contains export, since it doesn't have any context.

from gatsby-plugin-linaria.

@silvenon thank you for a quick reply! In your working example, where do you use this globals variable? From the docs, I understood that you just need to export in one of the files accessible by Gatbsy (similar to how fragments work) and it should be enough, but maybe I'm wrong

from gatsby-plugin-linaria.

Thank you so much for you help, it actually does work! Originally, I was trying to include it in a file inside pages folder, which didn't work for some reason, but when I imported it inside one of the components, it worked.

from gatsby-plugin-linaria.