React无法通过styled-components渲染全局CSS的问题排查

你的代码存在两个核心问题导致全屏红色背景无法正常显示，以下是具体修复步骤：

1. 修正 GlobalStyle 的导入方式 #

在 GlobalStyle.js 中你使用了默认导出（export default GlobalStyle），但在 index.js 中错误地使用了命名导入的语法（带大括号）。

修改 index.js 中的导入语句：

// 错误写法
import { GlobalStyle } from './styles/GlobalStyle.js';

// 正确写法
import GlobalStyle from './styles/GlobalStyle.js';

2. 修复 ReactDOM.render 的语法错误 #

ReactDOM.render 只接受单个根元素作为第一个参数，你直接传入了两个独立组件（<GlobalStyle /> 和 <App />），这会导致渲染失败。需要用 Fragment 或空标签包裹这两个组件。

修改 index.js 的渲染逻辑：

ReactDOM.render(
  <Fragment>
    <GlobalStyle />
    <App />
  </Fragment>,
  document.getElementById('root')
);

// 或者使用更简洁的空标签语法
ReactDOM.render(
  <>
    <GlobalStyle />
    <App />
  </>,
  document.getElementById('root')
);

额外注意事项（非当前问题但需修正） #

你的 :root 变量定义存在语法错误，--primary-color2 和 --primary-color3 不需要包含 color: 和引号，正确写法应为：

:root{
    --primary-color: #222260;
    --primary-color2: rgba(34, 34, 96, .6); /* 移除引号和color: */
    --primary-color3: rgba(34, 34, 96, .4); /* 移除引号和color: */
    --color-green: #42AD00;
    --color-grey: #aaa;
    --color-accent: #F56692;
    --color-delete: #FF0000;
}

验证依赖 #

确保你已经安装了 styled-components 依赖，若未安装，在项目根目录执行：

npm install styled-components
# 或
yarn add styled-components

完成以上修复后，重新启动项目即可看到全屏红色背景效果。

内容的提问来源于stack exchange，提问作者Miftah Yuzar Azwardhi