（注：本文使用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 ，然后將 <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不會去渲染其包含的子節點及子組件，所以這時應該檢查一下你的<GlobalStyle>組件下是否包裹了其他子節點。

正確和錯誤的用法在下方用圖片展示了，我創建的<GlobalStyle />是個單標簽，而不是像<GlobalStyle></GlobalStyle>這樣的封閉標簽（即使你用了封閉標簽，也不應該在其內部添加任何子節點或組件），你只需要保證<GlobalStyle />標簽在你整個React樹的最上方即可渲染后面的<Header />等其他所有組件。

全局樣式組件的正確使用方式

全局樣式組件的錯誤使用方式

在 styled-components.browser.esm.js 的第2261行，可以看到出現該警告的判斷條件是：

子節點不能被渲染的警告

前半部分是項目的環境變量，主要是后半部分React.Children.count(this.props.children)，意思是當前組件（即我們創建的<GlobalStyle>組件）下的子節點的計數，子節點不為0的時候會發出警報，告知我們全局變量組件中存在子節點，子節點不能被渲染。官方文檔中已經給出了較為詳細的解釋說明，小伙伴們也可以自己去查找下哈~