Gatsby: Question about gatsby-plugin-styled-components

Created on 12 Nov 2017 · 3Comments · Source: gatsbyjs/gatsby

First of all, thanks to all the contributors of GATSBY, I love it! My question is very simple but I couldn't find any posting with the answer.

How can I inject global styles for gatsby-plugin-styled-components if I'm not using Typography.js?
For example:
Where do I inject the following code?

injectGlobal`
  * { box-sizing: border-box; }
  body { margin: 0; color: #374047}
`

Thanks in advance!

question or discussion

Source

ferMartz

Most helpful comment

@dustinhorton thanks.
I created a layout folder with an index.js file. I then injected the following global styles and it worked like a charm :-)

import React from "react"

import { injectGlobal } from 'styled-components'

injectGlobal`
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit; }

html {
  font-size: 62.5%; }

body {
  box-sizing: border-box; }

body {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  line-height: 1.7;
  color: #374047; }
`

export default ({children}) =>
 <div>
     {children()}
 </div>

ferMartz on 12 Nov 2017

👍3

All 3 comments

Unless I'm misunderstanding (and this truly needs to be done differently with styled components), the HN site example shows how this can be achieved: https://github.com/gatsbyjs/gatsby/blob/5a0aac34bc4a509e871f524d8705cb9e0a501ce1/examples/hn/src/layouts/default.js#L4

edit: I hadn't realized injectGlobal was a styled components method, but I see it @ https://www.styled-components.com/docs/api. Curious why you'd need this in a Gatsby app where it'll easily handle just authoring a stylesheet.

dustinhorton on 12 Nov 2017

@dustinhorton thanks.
I created a layout folder with an index.js file. I then injected the following global styles and it worked like a charm :-)

import React from "react"

import { injectGlobal } from 'styled-components'

injectGlobal`
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit; }

html {
  font-size: 62.5%; }

body {
  box-sizing: border-box; }

body {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  line-height: 1.7;
  color: #374047; }
`

export default ({children}) =>
 <div>
     {children()}
 </div>

ferMartz on 12 Nov 2017

👍3

@ferMartz maybe this issue can be closed? :)