使用styled-components的GlobalStyles时为何出现解析错误？

这个错误原因其实很直白——你在Global.js文件里重复声明了同一个变量GlobalStyles，JavaScript在同一作用域里不允许这种操作，所以直接抛出了语法错误。

问题根源就在这两行代码： #

import { GlobalStyles } from "styled-components";
const GlobalStyles = createGlobalStyle`...`;

你先从styled-components导入了名为GlobalStyles的变量，紧接着又用const重新定义了同名变量，这就触发了标识符重复声明的报错。

修正后的完整代码 #

1. 修复src/components/styles/Global.js

import { createGlobalStyle } from "styled-components";

// 删掉重复导入的GlobalStyles，我们不需要它
const GlobalStyles = createGlobalStyle`
/* 修正@import的语法错误，去掉多余的引号和rel属性 */
@import url('https://fonts.googleapis.com/css2?family=Courgette&display=swap');

* { box-sizing: border-box; }
body { 
  background: #fff; 
  color: pink; 
  font-family: "Courgette", sans-serif; 
  font-size: 1.15em; 
  margin: 0; 
}
p { opacity: 0.6; line-height: 1.5; }
img { max-width: 100%; } /* 把image改成正确的HTML标签img */
`;

export default GlobalStyles;

我还顺便帮你修正了几个影响样式生效的小问题：

• 去掉了每个CSS规则后面的逗号，styled-components的模板字符串里写的是纯CSS，不需要对象语法的逗号
• 把image改成了img，这才是HTML里正确的图片标签，不然样式不会作用到图片上
• 修正了@import的语法错误，原来的写法多了不必要的引号和rel="stylesheet"，这是HTML link标签的属性，不是CSS @import的内容

2. App.js保持不变即可

你的App组件代码是没问题的，只要确保GlobalStyles的导入路径正确就行。

现在重新运行项目，这个重复声明的错误就会消失啦。

内容的提问来源于stack exchange，提问作者Melısa Yılmaz