injectglobal 已被彻底移除，v4+ 必须用 createglobalstyle 替代；它返回一个需挂载的 react 组件，非函数调用，且样式为真全局，需手动控制作用域。

injectGlobal 已被彻底移除，v4+ 必须用 createGlobalStyle 替代——这不是兼容层，是强制重构。

为什么 injectGlobal 会报错“not a function”

v4 开始，injectGlobal 不再导出，直接调用会触发 TypeError: injectGlobal is not a function。它不是被“deprecated”，而是从源码中删掉了。哪怕你装的是 v4.0.0，也找不到这个函数。

• 检查版本：yarn list styled-components 或 npm ls styled-components，确认是否 ≥4.0.0
• 旧项目升级后未改写法，常见于迁移时只更新了包，没动样式入口文件
• createGlobalStyle 返回的是一个 React 组件，不是执行函数，不能直接调用

createGlobalStyle 必须作为组件挂载到 DOM 树中

它不像以前那样“执行即注入”，而是一个需要被渲染的组件，且必须出现在 React 渲染树的顶层（比如 App 或 Root 的最外层）。

• 定义方式：export const GlobalStyle = createGlobalStyle`body { margin: 0; }`
• 使用方式：<globalstyle></globalstyle> —— 必须带闭合标签，不能省略斜杠
• 挂载位置：必须在 React.StrictMode 或根 Fragment 内部，且不能被条件渲染包裹（例如不能放在 {show && <globalstyle></globalstyle>} 中）
• 多次挂载无副作用，但仅首次生效；重复定义多个 GlobalStyle 组件也 OK，样式会合并

全局重置样式（reset）容易漏掉的关键选择器

很多团队手写 reset 时只清 body，结果 button、input、textarea 默认边框/内边距/字体仍不一致，导致 UI 毛刺。

• 建议至少包含：html, body, div, p, h1-h6, ul, ol, li, form, input, button, textarea, select, option
• 别忘了 box-sizing: border-box 要作用在 *::before, *::after 上，否则伪元素可能破坏布局
• font-family 和 line-height 建议显式声明，避免不同浏览器默认值差异
• 如果项目用 CSS-in-JS 主题系统，GlobalStyle 里不要硬编码颜色值，可传入 theme： const GlobalStyle = createGlobalStyle(({ theme }) => `body { background: ${theme.bg}; }`)

最常被忽略的一点：createGlobalStyle 定义的样式没有自动 scope，它就是真·全局 CSS，所以写 div { ... } 就真的会影响所有 div。别把它当成“安全的 reset”，该加前缀或限定范围时得自己控制。