使用styled-components报错 Attempted import error: injectGlobal is not exported from styled-components

本文链接：https://blog.csdn.net/weixin_44999716/article/details/113892140

在学习React构建简书网站项目时，遇到styled-components的injectGlobal已废弃的问题。根据官方更新，需使用createGlobalStyle替代。在style.js中使用createGlobalStyle定义全局样式，并在index.js中引入和渲染，成功解决报错并实现全局样式设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用styled-components报错 Attempted import error: injectGlobal is not exported from styled-components

慕课网中用React实现的简书网站的项目学习，7-1项目目录搭建，Styled-Components与Reset.css的结合使用

按照视频流程：

1.先安装styled-components

cnpm add styled-componen

2.然后将css文件改为js文件style.js，并编辑代码：

import { injectGlobal } from 'styled-components'

injectGlobal `
  body{
    margin:0;
    padding:0;
  }
`;

此时运行则会报出标题的错误。

报错原因：

官网链接

在这里插入图片描述

这个injectGlobal已经废除了，已经有新的实现方法了。

解决方案：

在和视频一样安装了styled-components并且把css文件改为js文件style.js，在style.js里面，使用createGlobalStyle方法进行替代并且把它的使用方法也相应改变：

具体代码为：

import { createGlobalStyle } from 'styled-components'

export const GlobalStyled = createGlobalStyle`
    body{
      margin:0;
      padding:0;
      background:green;
    }
`;

还需要index.js中引用并把相应组件添加进来，具体代码如下：

import React from 'react';
import {GlobalStyled} from './style.js';

function App() {
  return (
    <div>
      <GlobalStyled />
      hello world
    </div>
  );
}

export default App;