createglobalstyle 返回需挂载的react组件，必须在根组件中作为jsx元素渲染（如），不可直接执行或条件渲染，ssr下漏挂载会导致fouc；动态主题需显式声明参数并传入props；多实例按挂载顺序覆盖同名规则。
createGlobalStyle 不是 CSS 文件，也不是函数调用，它返回一个 React 组件 —— 必须挂载到 DOM 中才会生效。
createGlobalStyle 必须作为 JSX 元素渲染，不能直接执行
常见错误是把它当普通模板字符串写在入口文件里，比如 createGlobalStyle`body { margin: 0 }` 然后就不管了。这行代码只生成组件定义，不注入任何样式。
- ✅ 正确做法：在根组件（如
App或_app.tsx）中像普通组件一样使用：<globalstyle></globalstyle> - ❌ 错误做法：放在
useEffect里、条件判断中（{isClient && <globalstyle></globalstyle>}）、或单独导出却不渲染 - ⚠️ SSR 场景下漏掉渲染会导致 FOUC（页面闪白），Next.js 用户必须确保它出现在
_app.tsx的顶层，且不可被if包裹
动态主题变量必须显式声明参数并传入 props
createGlobalStyle 默认不读取 ThemeProvider 的 theme，也不能在模板字符串里直接写 ${props.theme.color} 而不声明函数签名。
- ✅ 支持写法：
createGlobalStyle(({ theme }) => `body { color: ${theme.text}; }`)，再在 JSX 中传参：<globalstyle theme="{theme}"></globalstyle> - ❌ 错误写法：
createGlobalStyle`body { color: ${props.theme.text} }`（props未声明，运行时报ReferenceError） - ? 静态样式建议直接用字符串模板；动态逻辑复杂时，抽成独立函数更易测试和复用
多个 createGlobalStyle 实例按挂载顺序覆盖同名规则
如果项目里有多个 createGlobalStyle，比如你写的重置样式 + 第三方 UI 库自带的 reset，它们会按 React 挂载顺序写入 中的 <style data-styled="gbl"></style> 标签，后挂载的覆盖先挂载的。
- ✅ 推荐：把所有全局基础样式（
reset、:root变量、默认字体）收拢到一个实例里 - ⚠️ 风险：第三方库（如某些 Design System）可能悄悄挂载自己的
createGlobalStyle，导致你的body font-size或box-sizing被意外覆盖 - ? 检查方式：打开 DevTools → Elements → 查看
下的<style data-styled="gbl"></style>标签顺序和内容
最容易被忽略的是 SSR 场景下的挂载时机 —— 它不是“写了就生效”，而是“挂了才生效”，且必须首屏即挂载。哪怕只是多包了一层 if 或延迟到 useEffect，都会让服务端吐出的 HTML 缺少样式，客户端 hydration 后才补上，造成视觉跳变。
