styled组件必须用函数式插值读取props，因模板字符串在定义时求值会报错；hover和媒体查询也需函数延迟执行；高频变动props会导致css规则爆炸，应避免传scrolly等实时值。
直接用 styled 组件的函数式写法读取 props，不是拼字符串，也不是靠 useState 实时改样式变量——后者根本不会触发样式更新。
为什么 ${props => props.color} 不能写成 ${props.color}
因为 styled.div`color: ${props.color};` 会在组件定义阶段就执行插值，此时 props 还没传入，直接报 Cannot read property 'color' of undefined。必须用函数形式延迟到渲染时求值。
-
styled.button`color: ${props => props.color || 'gray'};`✅ 渲染时才取值 -
styled.button`color: ${props.color};`❌ 定义时就崩 - 支持解构：
styled.div(({ size, variant }) => `font-size: ${size}px; background: ${variant === 'dark' ? '#000' : '#fff'};`)
怎么让 hover、media query 也响应 props 变化
伪类和媒体查询里的动态值，一样得靠函数插值，不能写死在模板字符串里——否则它们只会按首次渲染的 props 生效一次。
- hover 写法：
&:hover { color: ${props => props.hoverColor || 'blue'}; } - 媒体查询写法：
@media (max-width: ${props => props.breakpoint}px) { display: none; } - 注意：不要在 media query 里用
useMediaQuery这类 hook，styled函数里不支持 React 上下文
哪些 props 值适合传，哪些会拖慢性能
styled-components 为每组唯一 props 生成独立 class，高频变动值会导致 CSS 规则爆炸式增长，甚至触发重排。
- 适合的值：
primary、size="lg"、theme="dark"——离散、低频变更 - 危险的值：
scrollY={window.scrollY}、mouseX={e.clientX}、date={Date.now()}——每次渲染都不同，缓存失效 - 替代方案：动画类场景改用
style属性或keyframes+animation
最容易被忽略的一点是：你写的样式函数只执行一次（生成规则），后续 props 变化只是切换已存在的 class；所以调试时看到 class 名变了但样式没更新，大概率是插值函数返回了空字符串或无效 CSS 值，而不是“没重新跑函数”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
