React里用styled-components绑定props最简写法
直接在模板字符串里用函数接收props，返回CSS值，不用额外声明变量或条件判断块。它会在每次props变化时自动重生成样式规则，不是靠内联style硬塞。
- 写法：
const Button = styled.button`color: ${props => props.primary ? 'blue' : 'gray'};` - 注意：函数体必须是纯函数，不能调用
useState或useEffect，否则会报Invalid hook call - 如果值来自复杂计算，建议提前在组件内算好再传入，避免样式函数里做耗时操作
emotion的css函数怎么响应props变化
css函数本身不感知props，必须配合styled或组件内调用才能动态更新。单独用css({ color: props.color })不会响应后续props变更——它只执行一次，生成静态class名。
- 正确姿势：
const Comp = styled.div(props => [css`color: ${props.color};`, css`font-size: ${props.size}px;`]) - 错误姿势：
const style = css({ color: props.color })（props此时是undefined或外层作用域变量） - 性能提示：多个
css调用会被合并成一个class，但嵌套对象写法（如{ '&:hover': { color: 'red' } }）比模板字符串稍慢，简单场景优先用后者
为什么className切换比style属性更可靠
用style写动态样式看似直接，但无法利用CSS选择器能力（比如:hover、::before）、不支持媒体查询、丢失浏览器原生优化（如GPU加速动画），且服务端渲染时style属性无法复用已生成的CSS规则。
- 典型翻车点：给按钮加
style={{ transition: 'all 0.2s' }}，再用style={{ opacity: hover ? 0.7 : 1 }}，结果hover状态无法触发过渡效果 - 正确做法：用
styled.button`transition: all 0.2s; &:hover { opacity: 0.7; }`，让浏览器接管整个状态机 - 兼容性提醒：
styled-componentsv6+默认启用SSR，但若手动用StyleSheetManager禁用，className会变成随机哈希，导致样式丢失
Props变但样式没更新？先查这三件事
不是库不工作，大概率是JS层面的引用或比较问题。CSS-in-JS库依赖浅比较判断是否需要重生成样式，对引用类型尤其敏感。
立即学习“前端免费学习笔记（深入）”；
- 检查props是否被包装成新对象：比如每次渲染都写
<button config="{{" size:></button>，config是新对象，即使内容相同也会触发重计算 - 确认没有用
useMemo过度缓存样式函数：例如const styleFn = useMemo(() => props => ..., [])，闭包锁死了初始props - 留意主题上下文穿透：如果用
ThemeProvider，但子组件未用useTheme()或themeprops，修改主题不会触发样式重算
真正难调试的是那些“看起来变了，其实没变”的props——比如数组顺序调整但元素相同，或对象key顺序不同。这种时候别猜，直接在样式函数里加console.log(props)看实际传入值。
