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。很好奇为什么您需要在 Gatsby 应用程序中使用它，它可以轻松处理仅创作样式表的工作。

dustinhorton 于 2017-11-12

@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

@ferMartz也许这个问题可以关闭？ :)

fernandes 于 2018-02-14

此页面是否有帮助？

0 / 5 - 0 等级

Gatsby: 关于 gatsby-plugin-styled-components 的问题

最有用的评论

所有3条评论

相关问题