Emotion 动态样式并非天然更快，真正高效的方式是将变化部分交由 CSS 变量或内联 style，静态样式用 css 模板字符串复用；否则每次渲染新建对象会导致重复序列化、哈希、注入，引发缓存失效、FOUC 和卡顿。
Emotion 在处理动态 CSS 样式时并不天然“更快”——它快的前提是：你没把动态逻辑写进 css 函数里，而是用对了方式。
动态样式写在 css 里反而会变慢
常见错误是这样写：
function Button({ size, variant }) {
return <button css={{ fontSize: `${size}px`, backgroundColor: variant === 'primary' ? '#007bff' : '#6c757d' }}>
Click
</button>
}
每次渲染都传入新对象，css 函数被迫重新序列化、哈希、插入样式表——重复计算 + 重复注入。这不是动态样式的优势，是滥用运行时。
- 哈希结果不稳定 → 缓存失效 → 多余类名堆积
- 服务端无法提取该样式 → 关键 CSS 不完整 → 首屏 FOUC 风险上升
- 浏览器主线程反复执行样式生成 → 低端设备卡顿明显
真正快的动态样式写法：CSS 变量 + 静态 class
把变化的部分交给原生 style 或 CSS 变量，静态结构仍走 css 缓存路径：
立即学习“前端免费学习笔记（深入）”；
const buttonBase = css`
padding: 0.5rem 1rem;
border-radius: 4px;
background-color: var(--bg);
color: white;
`;
function Button({ size, variant }) {
const style = {
'--bg': variant === 'primary' ? '#007bff' : '#6c757d',
fontSize: `${size}px`
};
return <button css={buttonBase} style={style}>Click</button>;
}
这样写的好处：
-
buttonBase只生成一次，复用哈希类名 - 变量值不参与 Emotion 的序列化，无 runtime 开销
- 服务端能提取
buttonBase，客户端只 hydrate 变量
为什么不用 styled 组件做高频动态样式？
styled.button 内部仍调用 css，传入带插值的模板字符串（如 background: ${p => p.bg}）同样触发运行时计算。
容易踩的坑：
- 在
useEffect或事件回调里调用css→ 完全绕过 SSR 和缓存 - 多个包各自装不同版本
@emotion/cache→ 同一样式被注入多次 - 没开
@emotion/babel-plugin→ 所有样式退化为运行时，连静态部分都慢
真正影响速度的不是“动态”本身，而是动态逻辑是否污染了可缓存的样式块。Emotion 的快，只兑现给那些把变化控制在 style 或 CSS 变量层的人。
