CSS函数共享样式需用函数封装确保每次返回新对象，动态样式用高阶函数，伪类须带&前缀，媒体查询用@media键，混用时优先用cx合并，SSR需独立cache和renderStylesToString。
css函数怎么共享样式规则而不重复写
直接用 css 函数返回的对象可以复用，但必须确保每次调用都生成新对象——否则 React 会因引用相等跳过重渲染或样式更新。
- 把通用规则抽成常量时，用函数包裹：
const baseText = () => css({ fontSize: '1rem', lineHeight: 1.5 });，而不是const baseText = css({ ... }) - 需要动态参数（比如颜色）时，写成高阶函数：
const themedBorder = (color) => css({ border: `1px solid ${color}` }); - 别在组件顶层直接解构
css返回值，比如const { className } = css(...)，Emotion 的css不返回带className的对象，它只返回一个可传给className的字符串或对象
为什么用css函数拼接样式经常漏掉响应式或伪类
因为 css 函数默认不支持嵌套语法，&:hover、@media 这些必须显式写进对象里，不能靠缩进或换行自动识别。
- 伪类要写全路径：
css({ '&:hover': { color: 'blue' } })，漏掉&就变成子元素选择器 - 媒体查询用
@media字符串键：css({ '@media (min-width: 768px)': { display: 'flex' } }) - 多个条件叠加时，顺序很重要：伪类 + 媒体查询要嵌套写，比如
'@media (hover: hover) &:hover'，中间不能有空格，否则无效
css函数和styled组件混用时class名冲突怎么办
Emotion 会为 css 和 styled 分别生成 class 名，但如果你手动拼字符串、或用 cx 合并，就可能覆盖或丢失权重。
- 避免用
className={cx(css(...), 'my-class')}直接混入原生 class，优先用css重写那部分逻辑 - 如果必须组合，用
cx而不是加号拼接：cx(css(...), css({ fontWeight: 'bold' })) -
styled组件内部再用css是安全的，比如styled.div(props => css({ color: props.theme.text }))，但别在同一个元素上同时用styled的插值和外部css对象
服务端渲染时css函数生成的样式没注入到
SSR 下 css 生成的样式不会自动收集，得靠 Emotion 提供的 cache 和 renderStylesToString 配合。
- Node 环境必须创建独立 cache：
const cache = createCache({ key: 'css' });，并在 React 渲染时传给CacheProvider - 服务端调用
renderStylesToString才能拿到字符串，客户端要用hydrateCache补齐 - 别在 SSR 中用
useInsertionEffect或依赖 DOM 的逻辑触发css，它还没挂载
实际用下来，最常被忽略的是 cache 隔离和伪类书写格式——写错一个字符，样式就静默失效，连控制台都不报错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
