Gatsby: Вопрос о gatsby-plugin-styled-components

Созданный на 12 нояб. 2017 · 3Комментарии · Источник: gatsbyjs/gatsby

Прежде всего, спасибо всем участникам GATSBY, мне это нравится! Мой вопрос очень простой, но я не нашел ни одной публикации с ответом.

Как я могу внедрить глобальные стили для компонентов в стиле gatsby-plugin, если я не использую Typography.js?
Например:
Куда мне ввести следующий код?

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 Комментарий

Если я не ошибаюсь (и это действительно нужно делать по-другому со стилизованными компонентами), пример сайта HN показывает, как этого можно достичь: https://github.com/gatsbyjs/gatsby/blob/5a0aac34bc4a509e871f524d8705cb9e0a501ce1/examples/hn/ SRC / макеты / default.js # L4

изменить: я не понял, что injectGlobal был методом стилизованных компонентов, но я вижу его @ https://www.styled-components.com/docs/api. Любопытно, зачем вам это нужно в приложении Gatsby, где он легко справится с простым созданием таблицы стилей.

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, может быть, эту проблему можно закрыть? :)