createGlobalStyle 必须作为组件挂载到 React 树顶层渲染才生效，不可直接调用；支持函数式接收 theme 等 props，多个实例按挂载顺序覆盖同名样式，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 → ，找
<style data-styled="gbl"></style>标签，观察生成顺序和内容
服务端渲染（SSR）需确保 GlobalStyle 在首次 render 前已执行
Next.js 或 Remix 等框架中，若 createGlobalStyle 组件未在初始 HTML 中渲染，会导致 FOUC（闪白）或样式丢失：
立即学习“前端免费学习笔记（深入）”；
- ✅ Next.js：必须在
_app.tsx的Component外层包裹GlobalStyle，且不能条件渲染 - ✅ Remix：确保它出现在
root.tsx的最外层Outlet上方 - ⚠️ 常见坑：用
useEffect延迟挂载、或放在if (isClient)分支里 —— SSR 时完全不执行，客户端才补上，造成样式跳变
createGlobalStyle 很容易变成隐式依赖源。 
