emotion的css函数不支持直接传入数组，必须手动合并为单个对象；嵌套规则易被覆盖，需避免重复定义同一伪类；动态合并应缓存以防止重复渲染；主题变量需提前求值，babel插件不处理数组合并。
Emotion数组合并样式对象时，css函数不支持直接传入数组
很多人以为把多个样式对象塞进数组、再传给 css 就能自动合并，结果发现样式没生效或报错。这是因为 css 函数只接受单个对象或返回 CSS 字符串的函数，**不接受数组参数**。常见错误现象是控制台无报错但样式丢失，或出现 TypeError: Cannot convert a Symbol value to a string（尤其在用了 css + styled 混用场景时）。
正确做法是手动展开或合并：
- 用扩展运算符拼接：
css({ color: 'red' }, { fontSize: '14px' }) - 用
Object.assign或展开语法预合并：css({ ...baseStyle, ...overrideStyle }) - 若来源是动态数组（如 props.styleList），先用
Object.assign({}, ...styleArray)合并再传入
嵌套对象和响应式写法在数组合并中会丢失层级
Emotion 的 css 支持嵌套写法（如 &:hover）和媒体查询对象，但这些能力依赖于对象结构本身。一旦你用 Object.assign 或展开合并多个样式对象，而其中某个对象含嵌套规则，另一个不含，就容易覆盖或扁平化掉嵌套逻辑——比如 { '&:hover': { color: 'blue' } } 和 { color: 'red' } 合并后，&:hover 仍存在，但若两个对象都定义了 &:hover，后者会完全覆盖前者。
实操建议：
- 避免跨对象重复定义同一伪类或媒体查询键；统一收口到一个对象里再合并
- 需要条件式注入响应式规则时，优先用函数式写法：
css(theme => ({ [theme.breakpoints.up('sm')]: { padding: '16px' } }))，而不是拆成多个对象再合并 - 调试时打印合并后的对象，确认
&:hover、@media等 key 是否还在顶层
与 styled 组件组合使用时，数组合并容易引发重渲染或样式冲突
当把数组合并后的样式对象传给 styled.div 的插值（如 styled.div`${mergedCss}`），Emotion 会将其转为 className 并缓存。但如果每次渲染都重新合并数组（比如在组件内联写 Object.assign(...props.styles)），即使内容相同，也会生成新引用，导致 Emotion 无法命中缓存，造成多余 class 插入和潜在样式抖动。
关键点：
- 合并操作尽量提到组件外（如
const merged = css(...)在模块顶层）或用useMemo缓存 - 不要在
styled模板字符串里直接展开数组：styled.div`${stylesArray}`是非法的，会报Invalid style object - 如果必须动态组合，优先走
className={css(...)}的显式调用路径，而非模板字符串插值
主题变量和插件（如 @emotion/babel-plugin）对数组合并无特殊支持
Emotion 主题（ThemeContext）和 Babel 插件主要作用于 css 函数调用和 styled 标签模板，它们不会解析或重写传入的普通对象数组。也就是说，你不能指望插件自动把 [base, themeDependent] 这种数组“理解”成带主题上下文的样式链。
所以：
- 涉及主题变量的样式，必须确保合并前已执行函数调用（即传入的是已求值的对象，不是带
theme =>的函数） - Babel 插件不会优化
Object.assign合并行为，也不会提升缓存命中率，别把它当成“魔法开关” - 想利用插件的 source map 或标签压缩能力？那就老实用
css单次调用，别绕路数组合并
真正麻烦的从来不是怎么合并，而是合并之后谁来保证 key 的唯一性、嵌套不塌陷、主题不脱钩——这些细节一漏，就只能靠反复 inspect 元素查 class 名来定位问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
