Gatsby: गैट्सबी-प्लगइन-स्टाइल-घटकों के बारे में प्रश्न

को निर्मित 12 नव॰ 2017 · 3टिप्पणियाँ · स्रोत: gatsbyjs/gatsby

सबसे पहले, GATSBY के सभी योगदानकर्ताओं को धन्यवाद, मुझे यह पसंद है! मेरा प्रश्न बहुत सरल है लेकिन मुझे उत्तर के साथ कोई पोस्टिंग नहीं मिली।

यदि मैं Typography.js का उपयोग नहीं कर रहा हूँ, तो मैं gatsby-plugin-style-components के लिए वैश्विक शैलियों को कैसे सम्मिलित कर सकता हूँ?
उदाहरण के लिए:
मैं निम्नलिखित कोड कहां इंजेक्ट करूं?

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

अग्रिम में धन्यवाद!

question or discussion

स्रोत

ferMartz

सबसे उपयोगी टिप्पणी

@dustinhorton धन्यवाद।
मैंने index.js फ़ाइल के साथ एक लेआउट फ़ोल्डर बनाया है। मैंने फिर निम्नलिखित वैश्विक शैलियों को इंजेक्ट किया और यह एक आकर्षण की तरह काम किया :-)

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 12 नव॰ 2017

👍3

सभी 3 टिप्पणियाँ

जब तक मैं गलतफहमी नहीं कर रहा हूं (और इसे वास्तव में स्टाइल घटकों के साथ अलग तरीके से करने की आवश्यकता है), एचएन साइट उदाहरण दिखाता है कि यह कैसे प्राप्त किया जा सकता है: https://github.com/gatsbyjs/gatsby/blob/5a0aac34bc4a509e871f524d8705cb9e0a501ce1/examples/hn/ src/layouts/default.js#L4

संपादित करें: मुझे नहीं पता था कि injectGlobal एक स्टाइल घटक विधि थी, लेकिन मैं इसे @ https://www.styled-components.com/docs/api देखता हूं

dustinhorton 12 नव॰ 2017

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 12 नव॰ 2017

👍3

@ferMartz शायद इस मुद्दे को बंद किया जा सकता है? :)