CSS in JS 方案使样式与组件生命周期绑定：组件挂载时注入、卸载时可清理，避免全局污染；Emotion、Styled-Components 等在渲染时生成唯一 class 并插入 style 标签，Linaria 则构建期提取静态 CSS；部分方案支持卸载清理，需配合 CacheProvider 或 StyleSheetManager；异步加载组件可实现样式按需加载，服务端渲染时可提取关键样式，哈希缓存避免重复注入。
组件样式随组件加载，核心是让样式作用域与组件生命周期绑定——CSS in JS 方案天然支持这一点：样式定义在组件内部，组件挂载时注入，卸载时可清理（取决于方案），避免全局污染且按需生效。
样式随组件动态注入
CSS in JS 库（如 Emotion、Styled-Components、Linaria）在组件渲染时生成唯一 class 名，并将对应 CSS 规则插入 <style> 标签。组件首次渲染 → 样式注入；若使用 SSR 或缓存，可能提前注入，但运行时仍由组件驱动逻辑。
- Emotion 的
css或styledAPI 在调用时生成样式并返回 class 名，实际插入发生在 React 渲染阶段 - Styled-Components 的
styled.div创建组件时已注册样式，但真正写入 DOM 是该组件首次 mount 时 - 无运行时（如 Linaria）则在构建期提取静态 CSS，但 class 名仍绑定组件，打包后按需加载 CSS 块
组件卸载时自动清理（部分方案支持）
并非所有 CSS in JS 都自动卸载样式，但可通过配置或模式实现：
- Emotion 支持
CacheProvider+ 自定义 cache，配合insertionPoint可控制样式容器；搭配useInsertionEffect（React 18+）可在卸载前移除 style 标签（需手动管理） - Styled-Components 默认不清理，但可借助
StyleSheetManager和自定义target，结合 ref 管理 style 节点生命周期 - 更稳妥的方式是避免“动态全量注入”，改用条件 class 切换（如
className={cx({ active: isActive })}），样式本身静态存在，仅开关状态
按需加载与代码分割协同
样式随组件加载，还需配合模块打包策略：
立即学习“前端免费学习笔记（深入）”；
- 将 styled 组件或 Emotion 样式定义放在异步加载的模块中（如
React.lazy+import()），样式代码会随 JS chunk 一起加载 - 使用 Webpack 的
mini-css-extract-plugin无法直接用于 CSS in JS，但 Emotion 提供@emotion/babel-plugin支持提取静态样式到独立 CSS 文件，实现真正的按需 CSS 分包 - 服务端渲染时，Emotion/Styled-Components 均提供 extractCritical / collectStyles 方法，在首屏渲染后提取当前页面用到的样式，避免注入冗余规则
避免重复注入与冲突
同一组件多次渲染不会重复插入相同样式，因 CSS in JS 库内部用哈希或 Map 缓存已注册规则：
- Emotion 使用
cache.inserted记录已注入的原子化规则（如css`color: red`） - Styled-Components 对每个
styled.xxx创建唯一标识，相同定义复用已有 class - 注意：含 props 动态插值的样式（如
color: ${p => p.theme.color}）每次渲染可能生成新规则，应合理设计主题结构，减少运行时计算
不复杂但容易忽略：样式是否“随组件加载”，不仅看语法位置，更取决于注入时机、缓存策略和打包配置。把样式写进组件只是第一步，配合正确的库用法和构建链路，才能真正实现样式与组件共生命周期。
