注：在styled-component V4版本中injectGlobal API除去，取而代之的是createGlobalStyle樣式元件。

也就是說以前的 injectGlobal 全域性樣式在V4版本代替為使用 createGlobalStyle 渲染元件的方式來使用全域性樣式。

A helper method to write global CSS. It does not return a component, but adds the styles to the stylesheet directly.

import { injectGlobal } from 'styled-components' 

injectGlobal` 
@font-face { 
    font-family: "Operator Mono"; 
    src: url("../fonts/Operator-Mono.ttf"); 
} 
body { 
    margin: 0; 
} 
` 

We do not encourage the use of this. Try to use it once per app at most, if you must, contained in a single file. This is an escape hatch. Only use it for the rare @font-face definition or body styling.
 

createGlobalStyle 官方說明：

A helper function to generate a special StyledComponent that handles global styles. Normally, styled components are automatically scoped to a local CSS class and therefore isolated from other components. In the case of createGlobalStyle, this limitation is removed and things like CSS resets or base stylesheets can be applied.

Returns a StyledComponent that does not accept children. Place it at the top of your React tree and the global styles will be injected when the component is "rendered".

import { createGlobalStyle } from 'styled-components'

const GlobalStyle = createGlobalStyle`
  body {
    color: ${props => (props.whiteColor ? 'white' : 'black')};
  }
`

// later in your app

<React.Fragment>
  <Navigation /> {/* example of other top-level stuff */}
  <GlobalStyle whiteColor />
</React.Fragment>

Since the GlobalStyle component is a StyledComponent, that means it also has access to theming from the <ThemeProvider> component if provided.

import { createGlobalStyle, ThemeProvider } from 'styled-components'

const GlobalStyle = createGlobalStyle`
  body {
    color: ${props => (props.whiteColor ? 'white' : 'black')};
    font-family: ${props => props.theme.fontFamily};
  }
`

// later in your app

<ThemeProvider theme={{ fontFamily: 'Helvetica Neue' }}>
  <React.Fragment>
    <Navigation /> {/* example of other top-level stuff */}
    <GlobalStyle whiteColor />
  </React.Fragment>
</ThemeProvider>

例項測試：

style.js :

import {createGlobalStyle} from 'styled-components';

export const GlobalStyle = createGlobalStyle`
    body {
        background: blue;
    }
`;

App.js:

import React, { Component,Fragment } from 'react';
import Header from "./common/header";
//匯入樣式檔案
import {GlobalStyle} from "./style";

class App extends Component {
    render() {
        return (
            <Fragment>
                   {
                    /*注：GlobalStyle 下不允許包含子元件*/
                   }
                <GlobalStyle/>
                    <Header/>
            </Fragment>
        )
    }
}

export default App;

做的不好，僅供參考！