Gatsby: gatsby-plugin-styled-componentsに関する質問

作成日 2017年11月12日 · 3コメント · ソース: gatsbyjs/gatsby

まず第一に、GATSBYのすべての貢献者のおかげで、私はそれが大好きです！私の質問は非常に単純ですが、答えのある投稿は見つかりませんでした。

Typography.jsを使用していない場合、gatsby-plugin-styled-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 2017年11月12日

👍3

全てのコメント3件

私が誤解していない限り（そしてこれはスタイル付きコンポーネントで本当に別の方法で行う必要があります）、 HNサイトの例はこれを実現する方法を示しています： https ：

編集： injectGlobalがスタイル付きコンポーネントのメソッドであることに気づいていませんhttps：//www.styled-components.com/docs/apiで確認でき

dustinhorton 2017年11月12日

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 2017年11月12日

👍3

@ferMartz多分この問題は閉じることができますか？ :)

fernandes 2018年02月14日

このページは役に立ちましたか？

0 / 5 - 0 評価

Gatsby: gatsby-plugin-styled-componentsに関する質問

最も参考になるコメント

全てのコメント3件

関連する問題