7回答

雪原小狼狼

2018-10-17

已采纳

最新版的 styled-components v4 已经将原有的 injectGlobal 方法替换成了 createGlobalStyle ，而且用法也和之前的 injectGlobal 方法不同了

（直接像 injectGlobal 方法一样写 createGlobalStyle`/***CSS样式***/` 并不能生效，要定义一个全局样式的变量）

看了一下官方文档，尝试解决了问题：

• 首先引入新的API createGlobalStyle ，在下面创建一个 GlobalStyle 变量，用 createGlobalStyle 方法把 reset 样式包裹在其中：

• 在 'src/index.js'中，去掉对 './style' 的引入（不在这里引入了）：

• 在 'src/App.js' 中，引入刚刚定义的 GlobalStyle ，然后将 <GlobalStyle /> 放在 render() 中最外层元素下面：

这样后面的所有元素组件都应用了 GlobalStyle 中定义的 CSS Reset 样式了

14

7

背着兔子的胡萝卜

非常感谢！

2019-03-18

共7条回复

雪原小狼狼

2018-10-23

还有可能要注意一下，如果遇到类似警报：styled-components.browser.esm.js:2222 The global style component sc-global-105358235 was given child JSX. createGlobalStyle does not render children.

说明全局样式组件下存在子节点。createGlobalStyle不会去渲染子节点，这时应该检查一下你的<GlobalStyle>组件下是否包裹了其他子节点？

正确的用法是我上图中所展示的，我创建的<GlobalStyle />是个单标签，而不是下图中<GlobalStyle></GlobalStyle>这样的封闭标签（即使你用了封闭标签，也不应该在其内部添加任何子节点或组件），你只需要保证<GlobalStyle />标签在你整个React树的最上方（即App.js中）即可渲染后面的<Header />等其他所有组件。 

=================== 

在 styled-components.browser.esm.js 的第2261行，可以看到出现该警告的判断条件是：

前半部分是项目的环境变量，主要是后半部分React.Children.count(this.props.children)，意思是当前组件（即我们创建的<GlobalStyle>组件）下的子节点的计数，子节点不为0的时候会发出警报，告知我们全局变量组件中存在子节点，子节点不能被渲染

1

3

慕无忌4361777

似乎不能写{GlobalStyle}，直接写GlobalStyle，不然也有错

2018-11-12

共3条回复

半夜丶有狗叫

2018-10-17

可以把injectGlobal改为createGlobalStyle就可以了，因为styled-components版本升级了,原来的injectGlobal方法用不了

1

0

psdf

2018-10-23

现在变这样

./node_modules/css-loader/lib/url/escape.js
Error: ENOENT: no such file or directory............hello-jianshu\node_modules\css-loader\lib\url\escape.js

0

1

psdf

已解决了 谢谢老师、同学

2018-10-23

共1条回复

itellboy

2018-10-17

我也是，刚刚遇到这个问题

0

2

itellboy

回复

JOYer2018

没有，等老师，看怎么说

2018-10-17

共2条回复

JOYer2018

提问者

2018-10-17

添加iconfont又这样了

0

0

JOYer2018

提问者

2018-10-17

我这样写injectGlobal也没错啊

0

0