emotion中需用styled函数动态生成css，不可在css模板字符串中直接读取props；正确写法是styled.div(({ size, variant }) => ({ fontsize: size === 'lg' ? '1.25rem' : '1rem', color: variant === 'danger' ? 'red' : 'inherit' }))，注意ts类型标注与返回对象括号包裹。
Emotion里怎么用props动态生成CSS
Emotion本身不直接支持在css模板字符串里读取组件props，必须借助styled函数或useTheme + css组合。最可靠的方式是用styled创建组件，把props透传进样式逻辑里。
- 别在
css标签里写${props => ...}——它不会执行，只会当字符串拼进去 -
styled.div、styled.button这些工厂函数才是props驱动样式的正路 - 如果非要用
css（比如配合className），得配合useMemo或内联计算，但会失去Emotion的自动哈希和缓存优化
styled组件中访问props的写法和常见错误
Emotion的styled允许函数式写法，参数就是组件接收的props，返回CSS对象或模板字符串。但容易漏掉类型提示、忘记解构、或误用箭头函数嵌套层级。
- 正确写法：
styled.div(({ size, variant }) => ({ fontSize: size === 'lg' ? '1.25rem' : '1rem', color: variant === 'danger' ? 'red' : 'inherit' })) - 错误：写成
styled.div(props => { return { ... } })却不加括号包裹返回对象，JS会隐式返回undefined - 注意：TS里要显式标注
PropsWithChildren或自定义接口，否则props.theme或props.className可能报错
theme和props混用时的优先级与调试技巧
Emotion的theme是全局注入的，而props是局部传入的，两者可以共存，但容易混淆来源。比如color既可能来自theme.colors.text，也可能来自props.color，冲突时后者应覆盖前者。
- 推荐模式：
styled.div(({ theme, color = theme.colors.text }) => ({ color }))，让props做默认值兜底 - 调试时打印
console.log({ theme, color })到样式函数里，比查DevTools里的类名更直接 - 不要在
theme里塞业务态（如isDarkMode），那是props的事；theme只放设计系统常量
性能陷阱：每次渲染都重算样式怎么办
Emotion会对函数式styled的返回值做浅比较，但如果函数体里用了闭包变量、未稳定化的回调或new Date()这类动态值，会导致样式规则重复生成，浪费哈希计算和DOM更新。
- 避免在样式函数里调用
Math.random()、Date.now()、或引用外部mutable对象 - 如果依赖复杂计算，先用
useMemo预处理props，再传给styled，而不是把整个逻辑塞进样式函数 - 高频更新组件（如拖拽、动画）慎用函数式
styled，优先考虑静态css+ class切换
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
