优先用 styled，因其支持 props 响应、主题透传、嵌套语法及 ssr 稳定性；css 仅适用于静态样式注入或混用非 css-in-js 组件，且不响应 props 变化。
优先用 styled（无论 Emotion 还是 styled-components），除非你明确需要手动注入 className 或混用非 CSS-in-JS 组件。
什么时候该用 styled 而不是 css？
当组件需要响应 props 变化（比如 primary、disabled、error）、依赖主题、或需复用样式逻辑时，styled 是唯一合理选择。
-
styled.button内部自动做哈希缓存和浅比较，只要传入的是基础类型（string/number/boolean），props 改变就会触发样式重计算 -
css返回的是静态类名字符串，css<code>props => props.active ? 'red' : 'gray'这种写法只在调用那一刻执行一次，后续 props 更新完全无感知 - 想用
&:hover、&::before等嵌套语法？styled模板字符串直接支持；css必须改写成对象形式：css({ '&:hover': { opacity: 0.8 } })，且伪元素必须写全（'&::before'不能简写为'&:before'）
Emotion 的 css prop 和 styled 本质区别是什么？
css 是个“样式注入器”，它不创建新组件，只是给任意 JSX 元素加 class；styled 是个“组件工厂”，返回一个带样式绑定的 React 组件。
-
<div css="{css`color:" red></div>：适合临时覆盖、工具函数内生成样式、或搭配第三方 UI 库（如 MUI）手动注入 class -
const Button = styled.button`color: ${props => props.primary ? 'blue' : 'gray'};`：适合封装可复用、带交互逻辑的 UI 原子组件 - 高频渲染场景下，
css每次调用都可能产生新 class（无去重），而styled同一定义只注册一次组件（前提是别在 render 里重新声明）
为什么 SSR 时 css 容易闪屏，而 styled 更稳？
服务端渲染时，css prop 依赖 Emotion 的全局 cache 实例来收集样式；如果多个请求共用同一个 cache（比如没按请求新建实例），样式会互相污染，导致客户端 hydration 后 class 名不一致、FOUC。
-
styled组件的样式在服务端是随组件树同步提取的，配合renderStylesToString或extractCritical更容易对齐客户端 - Next.js 用户注意：
getServerSideProps中必须调用renderStylesToString，并把返回的styles插入 HTML 的<style></style>标签，否则客户端首次渲染无样式 - 别在服务端用
createCache({ key: 'css' })后跨请求复用——每个请求应创建独立 cache 实例
和 Tailwind 或 CSS Modules 混用要注意什么？
Emotion 默认插入顺序在 最后，Tailwind 的 utility class 很可能被覆盖；CSS Modules 的局部作用域类名也可能因 specificity 不足而失效。
- 调整 Emotion 插入点：用
CacheProvider配合key+container显式控制<style></style>标签位置 - PurgeCSS 若误删 Emotion 生成的 class，需在
content配置中加入**/*.js和**/*.ts，确保扫描到模板字符串里的样式 - 避免同时用
cssprop 和className控制同一属性（如都设color），浏览器按 specificity 和顺序决定最终值，调试困难
最常被忽略的一点：Emotion 的缓存机制依赖 props 引用稳定性。传对象或函数引用进去，哪怕内容没变，也会让 styled 误判为“新 props”，跳过缓存——解构出基础字段，或用 useMemo 提前归一化，比硬套 css + useMemo 更轻量也更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
