styled组件插值必须用函数形式，如${props => props.color}，避免定义时取值报错；hover和媒体查询也需函数响应props变化；高频变动props会导致class爆炸，应避免传scrollY等实时值。
props 插值必须写成函数，不能直接取值
直接写 ${props.color} 会报 Cannot read property 'color' of undefined，因为 styled 组件定义时 props 还不存在。插值必须是函数形式，在每次渲染时才执行求值。
-
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 生效一次，后续 props 更新不会触发重计算。
- hover 动态色：
&:hover { color: ${props => props.hoverColor || 'blue'}; } - 断点适配：
@media (max-width: ${props => props.breakpoint}px) { display: none; } - 别在 media query 里调
useMediaQuery或其他 hook，styled函数不支持 React 上下文
高频变动的 props 会导致 CSS 规则爆炸
styled-components 为每组唯一 props 值生成独立 class。传 scrollY、mouseX、Date.now() 这类实时值，等于每帧都新建 class，内存飙升，还可能触发重排。
- 适合传的值：
primary、size="lg"、variant="outline"—— 离散、低频变更 - 危险值示例：
scrollY={window.scrollY}、opacity={e.opacity}，应改用keyframes或原生 CSS 动画 - 复杂计算建议提前在组件内用
useMemo处理好再传，避免插值函数里做耗时操作
attrs() 是设置默认或派生 HTML 属性的正确位置
attrs() 不影响样式逻辑，但能透传或派生 DOM 属性（如 type、disabled、src），且支持函数式动态计算。
立即学习“前端免费学习笔记（深入）”；
- 静态默认：
styled.input.attrs({ type: 'password' })`...` - 动态推导：
styled.img.attrs(props => ({ src: props.src || 'fallback.jpg', alt: props.alt || 'Image' }))`...` - 注意：它不参与样式插值，别指望
attrs里的值能被${props => ...}拿到——除非你显式把它们也作为 props 透传下去
props.color 但颜色没变，大概率是插值函数返回了空字符串、undefined 或非法 CSS 值，而不是“函数没跑”。 
