styled-components组件升级v4版本的全局样式踩坑

（注：本文使用ES6 Module模块化，框架选用React）

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

注意：直接像原 injectGlobal 方法一样使用不能生效，要定义一个全局样式变量，这个变量将作为组件插入文档。

使用新版 createGlobal() 方法

1. 引入新的API createGlobalStyle ，在下面创建一个 GlobalStyle 变量，用 createGlobalStyle 方法把全局样式包裹在其中（包裹css样式使用反引号字符串）：

创建GlobalStyle变量

（注：老版的injectGlobal方法不需要定义变量，v4新版不能这样使用）

错误的createGlobal方法使用方式

2. 在 'src/App.js' 中（路径请自行更改哦），引入刚刚定义的 GlobalStyle ，然后将 组件放在 render() 中最外层元素下面：

以组件的形式引入全局CSS样式

像这样引用好之后，就可以正常使用全局变量啦=w=

常见问题

Q: 使用styled-components时，在测试时遇到如下警告：

styled-components.browser.esm.js:2222 The global style component sc-global-105358235 was given child JSX. createGlobalStyle does not render children.

A: 该警告说明全局样式组件下存在子节点。createGlobalStyle不会去渲染其包含的子节点及子组件，所以这时应该检查一下你的组件下是否包裹了其他子节点。

正确和错误的用法在下方用图片展示了，我创建的是个单标签，而不是像这样的封闭标签（即使你用了封闭标签，也不应该在其内部添加任何子节点或组件），你只需要保证标签在你整个React树的最上方即可渲染后面的

等其他所有组件。

全局样式组件的正确使用方式

全局样式组件的错误使用方式

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

子节点不能被渲染的警告

前半部分是项目的环境变量，主要是后半部分React.Children.count(this.props.children)，意思是当前组件（即我们创建的组件）下的子节点的计数，子节点不为0的时候会发出警报，告知我们全局变量组件中存在子节点，子节点不能被渲染。官方文档中已经给出了较为详细的解释说明，小伙伴们也可以自己去查找下哈~