Gatsby: Pregunta sobre gatsby-plugin-styled-components

Creado en 12 nov. 2017 · 3Comentarios · Fuente: gatsbyjs/gatsby

En primer lugar, gracias a todos los colaboradores de GATSBY, ¡me encanta! Mi pregunta es muy simple pero no pude encontrar ninguna publicación con la respuesta.

¿Cómo puedo inyectar estilos globales para gatsby-plugin-styled-components si no estoy usando Typography.js?
Por ejemplo:
¿Dónde inyecto el siguiente código?

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

¡Gracias por adelantado!

question or discussion

Fuente

ferMartz

Comentario más útil

@dustinhorton gracias.
Creé una carpeta de diseño con un archivo index.js. Luego inyecté los siguientes estilos globales y funcionó a las mil maravillas :-)

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

👍3

Todos 3 comentarios

A menos que no lo entienda (y esto realmente debe hacerse de manera diferente con componentes con estilo), el ejemplo del sitio de HN muestra cómo se puede lograr: https://github.com/gatsbyjs/gatsby/blob/5a0aac34bc4a509e871f524d8705cb9e0a501ce1/examples/hn/ src / layouts / default.js # L4

editar: No me había dado cuenta de que injectGlobal era un método de componentes con estilo, pero lo veo @ https://www.styled-components.com/docs/api. Curioso por qué necesitaría esto en una aplicación de Gatsby donde manejará fácilmente la creación de una hoja de estilo.

dustinhorton en 12 nov. 2017

@dustinhorton gracias.
Creé una carpeta de diseño con un archivo index.js. Luego inyecté los siguientes estilos globales y funcionó a las mil maravillas :-)

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

👍3

@ferMartz ¿ tal vez este problema se pueda