Gatsby: Pergunta sobre gatsby-plugin-styled-components

Criado em 12 nov. 2017 · 3Comentários · Fonte: gatsbyjs/gatsby

Em primeiro lugar, obrigado a todos os contribuidores do GATSBY, adorei! Minha pergunta é muito simples, mas não consegui encontrar nenhuma postagem com a resposta.

Como posso injetar estilos globais para gatsby-plugin-styled-components se não estiver usando o Typography.js?
Por exemplo:
Onde injeto o código a seguir?

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

Desde já, obrigado!

question or discussion

Fonte

ferMartz

Comentários muito úteis

@dustinhorton obrigado.
Criei uma pasta de layout com um arquivo index.js. Em seguida, injetei os seguintes estilos globais e funcionou perfeitamente :-)

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 em 12 nov. 2017

👍3

Todos 3 comentários

A menos que eu esteja entendendo mal (e isso realmente precisa ser feito de forma diferente com componentes estilizados), o exemplo do site HN mostra como isso pode ser feito: https://github.com/gatsbyjs/gatsby/blob/5a0aac34bc4a509e871f524d8705cb9e0a501ce1/examples/hn/ src / layouts / default.js # L4

editar: Eu não sabia que injectGlobal era um método de componentes estilizados, mas vejo que @ https://www.styled-components.com/docs/api. Curioso para saber por que você precisaria disso em um aplicativo Gatsby, onde facilmente manipulará apenas a criação de uma folha de estilo.

dustinhorton em 12 nov. 2017

@dustinhorton obrigado.
Criei uma pasta de layout com um arquivo index.js. Em seguida, injetei os seguintes estilos globais e funcionou perfeitamente :-)

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 em 12 nov. 2017

👍3

@ferMartz talvez este problema possa ser