必须用函数插值，否则模板字符串在组件定义时求值而props未传入，导致读取undefined属性报错；插值函数需延迟执行、处理默认值、返回合法CSS字符串，避免空串或高频变动值引发样式失效或性能问题。
必须用函数插值，否则会报 TypeError: Cannot read property 'xxx' of undefined——因为模板字符串在组件定义时就求值，而 props 此时根本不存在。
为什么 ${props => props.color} 不能写成 ${props.color}
styled-components 在创建组件时（即执行 styled.div`...` 这行代码时）就解析模板字符串。此时 props 还没传入，直接访问 props.color 相当于读取 undefined.color，必然报错。
- ✅ 正确：样式函数延迟到渲染时执行，
props已就位 - ❌ 错误：定义阶段就求值，
props是undefined - ⚠️ 注意：连解构也得放在函数体内，
const { color } = props写在外面照样崩
布尔 props 必须显式转为 CSS 值，不能裸用
传 disabled={true} 不代表 CSS 自动理解“禁用=半透明”，插值函数返回的必须是合法 CSS 字符串，不是 JS 布尔值。
-
opacity: ${props => props.disabled ? 0.5 : 1};✅ -
opacity: ${props => props.disabled};❌ 返回true，浏览器忽略该声明 -
display: ${props => props.hidden && 'none'};❌ 可能返回false或undefined，CSS 解析失败
处理 undefined 和高频变动值的两个关键点
插值函数里不 guard 默认值，或传实时坐标类 props，都会引发样式失效或性能崩溃。
立即学习“前端免费学习笔记（深入）”；
- 兜底写法优先用解构默认：
font-size: ${({ size = '14px' }) => size}; - 避免
${props => props.margin}px→ 改成${props => (props.margin ?? 0) + 'px'} - 禁止传
mouseX={e.clientX}、scrollY={window.scrollY}等每次渲染都变的值，会导致 class 名爆炸、内存泄漏 - 复杂逻辑必须抽离：比如
const getBg = ({ variant }) => variant === 'danger' ? '#dc3545' : '#28a745';，再写background: ${getBg};
最容易被忽略的是：插值函数返回空字符串（如 ${props => props.loading && 'opacity: 0.6;'}），浏览器不会报错，但那段样式直接消失——它不是没运行，而是运行了，只是返回了无效内容。
