Styled-components全局样式使用指南

本文深入解析了 styled-components 中 createGlobalStyle 的正确使用方式与常见陷阱，强调它必须作为 React 组件在应用根层级渲染才能生效，而非直接调用；详解了如何安全地结合 theme 动态生成全局样式、多个实例间的覆盖规则及 SSR 场景下避免 FOUC 的关键实践，同时提醒开发者警惕其在复杂架构中引发的隐式依赖和优先级冲突问题——掌握这些细节，才能真正让全局样式可控、可维护、不踩坑。

createGlobalStyle 必须作为组件挂载到 React 树顶层

直接调用 createGlobalStyle 只会返回一个组件，不会自动注入样式。常见错误是把它当普通 CSS 导入或在函数里执行却不渲染：

• ❌ 错误：在 index.js 里写 createGlobalStyle`body { margin: 0 }` 但没用 JSX 渲染它
• ✅ 正确：把它当作一个 React 组件，在根组件（如 App 或 Root）中作为 JSX 元素使用
• ⚠️ 注意：如果挂载在某个子组件内部（比如按钮点击后才渲染），样式可能延迟生效或被重复挂载

全局样式不能依赖 props 或 theme 动态计算（除非显式传入）

createGlobalStyle 默认不接收 props，也不自动读取 ThemeProvider 的 theme。想用主题变量必须显式透传：

• ✅ 支持：定义时用函数形式，如 createGlobalStyle(({ theme }) => `body { color: ${theme.text}; }`)
• ✅ 然后在 JSX 中传入 theme：<GlobalStyle theme={theme} />
• ❌ 不支持：在模板字符串里直接写 ${props.theme.primary} 而不声明参数
• ? 提示：若只用静态值，直接写字符串更轻量；动态逻辑多时，建议抽离为独立函数避免重复计算

多个 createGlobalStyle 实例会按挂载顺序覆盖同名规则

同一个 CSS 属性（如 body font-size）在多个 createGlobalStyle 中出现时，后挂载的会覆盖先挂载的 —— 这和 CSS 层叠规则一致，但容易被忽略：

• ✅ 推荐：把所有基础重置（reset）、字体定义、自定义属性（:root）统一放在一个实例里
• ⚠️ 风险：插件或第三方库自带 createGlobalStyle（比如某些 UI 库的 reset），可能意外覆盖你的设置
• ? 检查方法：打开 DevTools → Elements → ，找