组件样式如何随组件加载_使用css in js方式引入样式

CSS-in-JS方案使样式随组件加载生效并自动清理，支持作用域绑定、SSR同步、动态主题响应及卸载清理，主流库如Emotion和Styled-Components通过生命周期钩子与缓存机制保障样式精准注入与复用。

组件样式随组件加载，关键在于确保样式只在组件挂载时生效、卸载时清理（尤其在 SSR 或动态加载场景下），而 CSS-in-JS 方案天然支持这种“作用域绑定”和“生命周期联动”。主流库如 Emotion、Styled-Components、JSS 都能实现样式与组件的强耦合，无需手动管理 link 标签或 class 冲突。

样式随组件实例化自动注入

CSS-in-JS 库在组件首次渲染时，会将 JS 中定义的样式规则转为真实 CSS，并插入到 中（或通过 标签动态挂载）。该过程由组件调用触发，不依赖外部文件加载顺序。

• Emotion 的 css 或 styled 函数：每次调用生成唯一 className 和对应样式规则，仅当组件 render 时执行
• Styled-Components 的 styled.xxx 组件：底层使用 useInsertionEffect（React 18+）或 useLayoutEffect 确保样式在 DOM 渲染前就位
• 样式不会提前全局污染，也不会因组件未渲染而冗余注入

服务端渲染（SSR）中保持样式同步

服务端需提取当前页面所有组件用到的样式，拼成 字符串，随 HTML 一同下发；客户端 hydration 时复用已有样式，避免 FOUC 或重复插入。

• Emotion 提供 CacheProvider + createCache({ key: 'emotion' })，配合 extractCritical（Node 环境）或 cache.sheet.toString()（客户端）提取样式
• Styled-Components 使用 ServerStyleSheet 在服务端收集、collectStyles 包裹组件树，再注入到 HTML 模板中
• 关键点：服务端和客户端必须使用相同的 cache key 或 sheet 实例，否则样式无法复用

动态主题/条件样式随组件状态响应更新

CSS-in-JS 天然支持运行时计算样式。组件内 props、theme、hooks 状态变化时，样式函数重新执行，生成新规则并替换旧规则（或新增）。

• 例如：const Button = styled.button(({ theme, variant }) => ({ backgroundColor: theme.colors[variant] }))
• Emotion 的 css 支持传入函数，参数为 { theme }，自动订阅 theme 变化
• 样式更新不操作 DOM class 列表，而是直接切换已注入的 CSS 规则（通过 className 变更指向不同规则）

卸载时自动清理（可选，取决于库和配置）

多数 CSS-in-JS 库默认不主动删除已注入样式（因复用成本低且影响性能），但可通过配置或手动方式控制：

• Emotion 支持 cache.insertionPoint 指向特定 节点，便于按需清空子节点
• Styled-Components 在严格模式或测试环境可通过 StyleSheet.reset() 清除全部
• 若组件频繁挂载/卸载且样式差异大，建议用 key 强制重置组件实例，让样式逻辑自然重建

不复杂但容易忽略：确保 babel 插件（如 @emotion/babel-plugin 或 babel-plugin-styled-components）已启用，才能把静态样式提升、压缩并启用标签模板优化。没有它，样式仍可用，但失去 source map、label 命名、自动 label 等调试与性能优势。