Gatsby: Pertanyaan tentang gatsby-plugin-styled-components

Dibuat pada 12 Nov 2017 · 3Komentar · Sumber: gatsbyjs/gatsby

Pertama-tama, terima kasih kepada semua kontributor GATSBY, I love it! Pertanyaan saya sangat sederhana tetapi saya tidak dapat menemukan posting dengan jawabannya.

Bagaimana saya bisa menyuntikkan gaya global untuk gatsby-plugin-styled-components jika saya tidak menggunakan Typography.js?
Sebagai contoh:
Di mana saya menyuntikkan kode berikut?

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

Terima kasih sebelumnya!

question or discussion

Sumber

ferMartz

Komentar yang paling membantu

@dustinhorton terima kasih.
Saya membuat folder layout dengan file index.js. Saya kemudian menyuntikkan gaya global berikut dan itu bekerja seperti pesona :-)

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 pada 12 Nov 2017

👍3

Semua 3 komentar

Kecuali saya salah paham (dan ini benar-benar perlu dilakukan secara berbeda dengan komponen gaya), contoh situs HN menunjukkan bagaimana ini dapat dicapai: https://github.com/gatsbyjs/gatsby/blob/5a0aac34bc4a509e871f524d8705cb9e0a501ce1/examples/hn/ src/tata letak/default.js#L4

edit: Saya tidak menyadari injectGlobal adalah metode komponen gaya, tetapi saya melihatnya @ https://www.styled-components.com/docs/api. Ingin tahu mengapa Anda membutuhkan ini di aplikasi Gatsby di mana ia akan dengan mudah menangani pembuatan stylesheet saja.

dustinhorton pada 12 Nov 2017

@dustinhorton terima kasih.
Saya membuat folder layout dengan file index.js. Saya kemudian menyuntikkan gaya global berikut dan itu bekerja seperti pesona :-)

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 pada 12 Nov 2017

👍3

@ferMartz mungkin masalah ini bisa ditutup? :)