Gatsby: سؤال حول مكونات على غرار برنامج غاتسبي

تم إنشاؤها على ١٢ نوفمبر ٢٠١٧ · 3تعليقات · مصدر: gatsbyjs/gatsby

بادئ ذي بدء ، شكرًا لجميع المساهمين في GATSBY ، أحبها! سؤالي بسيط للغاية ولكن لم أجد أي منشور بالإجابة.

كيف يمكنني حقن أنماط عامة لمكونات على غرار gatsby-plugin-style إذا لم أكن أستخدم Typography.js؟
على سبيل المثال:
أين أقوم بحقن الكود التالي؟

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

شكرا لك مقدما!

question or discussion

مصدر

ferMartz

التعليق الأكثر فائدة

تضمين التغريدة
لقد أنشأت مجلد تخطيط بملف 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 في ١٢ نوفمبر ٢٠١٧

👍3

ال 3 كومينتر

ما لم أكن أفهم (وهذا يحتاج حقًا إلى القيام به بشكل مختلف مع المكونات المصممة) ، يوضح مثال موقع HN كيف يمكن تحقيق ذلك: https://github.com/gatsbyjs/gatsby/blob/5a0aac34bc4a509e871f524d8705cb9e0a501ce1/examples/hn/ src / Layouts / default.js # L4

تحرير: لم أدرك أن injectGlobal كانت طريقة مكونات مصممة ، لكنني أراها @ https://www.styled-components.com/docs/api. من الغريب سبب حاجتك إلى هذا في تطبيق Gatsby حيث سيتعامل بسهولة مع مجرد كتابة ورقة أنماط.

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 في ١٢ نوفمبر ٢٠١٧

👍3

ferMartz ربما يمكن إغلاق هذه المشكلة؟ :)