styled-components@3.4.10导入createGlobalStyle报错如何解决？

createGlobalStyle 是 styled-components 在 v4.0.0 版本才正式推出的全局样式API，你当前安装的v3.4.10版本不存在该导出项，因此触发导入错误。

有两种可选方案可解决该问题：

• 方案1：升级styled-components到v4及以上版本
  运行以下命令升级依赖包即可，升级后你现有的createGlobalStyle相关代码无需修改可直接运行：

  # 升级到最新稳定版
  npm install styled-components@latest
  # 也可指定v4的最终稳定版
  npm install styled-components@4.4.1
  

• 方案2：保留当前v3版本，使用v3对应的全局样式API injectGlobal
  1. 修改/src/theme/globalStyles.js代码如下：

  import { injectGlobal } from 'styled-components'
  
  injectGlobal`
  html {
      height: 100%
  }
  * {
      padding: 0;
      margin: 0
  }
  `
  

  2. 修改入口文件index.js的引入逻辑，injectGlobal调用后直接生效，无需作为组件挂载：

  import React from 'react'
  import ReactDOM from 'react-dom'
  import App from './App'
  // 直接引入全局样式文件即可，无需接收组件变量
  import './theme/globalStyles'
  
  ReactDOM.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>,
    document.getElementById('root')
  )
  

内容的提问来源于stack exchange，提问作者Oybek Toshmatov