动态CSS在styled-components中依赖函数插值实现响应式样式，${props => props.color}不可简写为${props.color}，因模板字符串在定义时求值而props尚未存在；伪类、媒体查询及传入值均需函数化以确保每次渲染正确取值，不稳定值将导致CSS类爆炸和性能问题。
动态 CSS 在 styled-components 里不是“改变量再刷新样式”，而是靠函数插值在渲染时生成对应规则——传错值、写错形式、高频更新都会直接导致样式不生效或性能崩塌。
为什么 ${props => props.color} 不能简写成 ${props.color}
因为模板字符串在组件定义阶段就执行求值，此时 props 还不存在，会立刻报 Cannot read property 'color' of undefined。只有函数形式才能延迟到每次渲染时取值。
-
styled.div`color: ${props => props.color};`✅ 渲染时读取，安全 -
styled.div`color: ${props.color};`❌ 定义时崩，根本无法挂载 - 解构写法也合法：
styled.div(({ size, variant }) => `font-size: ${size}px; background: ${variant === 'dark' ? '#000' : '#fff'};`)
hover / media query 怎么响应 props 变化
伪类和媒体查询里的值同样必须函数化，否则只按首次渲染的 props 生效一次，后续变化完全无感。
&:hover { color: ${props => props.hoverColor || 'blue'}; }@media (max-width: ${props => props.breakpoint}px) { display: none; }- 别在 styled 函数里调用
useMediaQuery或其他 Hook —— 这里没有 React 上下文，会直接报错
哪些 props 值能传，哪些一传就出事
styled-components 为每组唯一 props 组合生成独立 CSS class，所以值的“稳定性”比“存在性”更重要。
立即学习“前端免费学习笔记（深入）”；
- 安全值：
size="lg"、variant="primary"—— 离散、低频变更，缓存复用率高 - 危险值：
scrollY={window.scrollY}、mouseX={e.clientX}、date={Date.now()}—— 每次渲染都不同，CSS 规则爆炸增长，还可能触发重排 - 动画类场景应改用
@keyframes+animation，而非靠 props 驱动样式重生成
最容易被忽略的是：你写的样式函数只执行一次（生成规则），之后只是切换 class；如果看到 class 名变了但样式没更新，大概率是插值函数返回了空字符串、undefined 或非法 CSS 值，而不是函数没跑。
