Gatsby: Question sur gatsby-plugin-styled-components

Créé le 12 nov. 2017 · 3Commentaires · Source: gatsbyjs/gatsby

Tout d'abord, merci à tous les contributeurs de GATSBY, j'adore ça ! Ma question est très simple mais je n'ai trouvé aucun message avec la réponse.

Comment puis-je injecter des styles globaux pour les composants gatsby-plugin-styled si je n'utilise pas Typography.js ?
Par exemple:
Où injecter le code suivant ?

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

Merci d'avance!

question or discussion

Source

ferMartz

Commentaire le plus utile

@dustinhorton merci.
J'ai créé un dossier de mise en page avec un fichier index.js. J'ai ensuite injecté les styles globaux suivants et cela a fonctionné à merveille :-)

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

👍3

Tous les 3 commentaires

Sauf si je me trompe (et cela doit vraiment être fait différemment avec des composants stylisés), l' exemple du site HN montre comment cela peut être réalisé : https://github.com/gatsbyjs/gatsby/blob/5a0aac34bc4a509e871f524d8705cb9e0a501ce1/examples/hn/ src/layouts/default.js#L4

edit: je n'avais pas réalisé que injectGlobal était une méthode de composants stylisés, mais je le vois @ https://www.styled-components.com/docs/api. Curieux de savoir pourquoi vous en auriez besoin dans une application Gatsby où elle gérera facilement la création d'une feuille de style.

dustinhorton le 12 nov. 2017

@dustinhorton merci.
J'ai créé un dossier de mise en page avec un fichier index.js. J'ai ensuite injecté les styles globaux suivants et cela a fonctionné à merveille :-)

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

👍3

@ferMartz peut-être que ce problème peut être clos ? :)