必须用函数插值，否则模板字符串在组件定义时求值而props未传入，导致读取undefined属性报typeerror；插值函数需延迟执行、处理默认值、返回合法css字符串，避免空串或高频变动值引发样式失效或性能问题。
必须用函数插值，否则模板字符串在组件定义时就求值，而此时 props 还没传入，直接访问会报 TypeError: Cannot read property 'xxx' of undefined。
为什么 ${props => props.color} 不能写成 ${props.color}
因为 styled.button`color: ${props.color};` 这行代码执行时，styled 正在生成 CSS 规则，props 根本不存在——它还没被 React 传进来。只有写成函数形式，才能把取值逻辑延迟到组件实际渲染时执行。
- 错误写法：
const Button = styled.button`color: ${props.color};`→ 定义阶段就崩 - 正确写法：
const Button = styled.button`color: ${props => props.color || '#333'};` - 连解构都不能提前：
const { color } = props放在插值外照样报错
布尔 props 必须显式转为合法 CSS 值
disabled={true} 不代表样式自动变灰；插值函数返回的必须是浏览器能解析的 CSS 字符串，不是 JS 布尔值。
- ❌
opacity: ${props => props.disabled};→ 返回true，CSS 忽略该声明 - ❌
display: ${props => props.hidden && 'none'};→ 可能返回false或undefined，样式失效 - ✅
opacity: ${props => props.disabled ? 0.5 : 1}; - ✅
display: ${props => props.hidden ? 'none' : 'block'};
如何安全处理 undefined 和高频变动值
插值函数里不 guard 默认值，或传实时坐标类 props，都会导致样式静默失效或 class 名爆炸。
- 兜底优先用解构默认：
font-size: ${({ size = '14px' }) => size}; - 避免
${props => props.margin}px→ 改成${props => (props.margin ?? 0) + 'px'} - 禁止传
mouseX={e.clientX}、scrollY={window.scrollY}等每次渲染都变的值 - 复杂逻辑必须抽离：
background: ${getBg};，而不是塞进模板字符串里
hover 和媒体查询里的 props 也要函数插值
伪类和媒体查询不会自动响应 props 变化——如果写死值，它们只按首次渲染的 props 生效一次。
- ✅
&:hover { color: ${props => props.hoverColor || 'blue'}; } - ✅
@media (max-width: ${props => props.breakpoint}px) { display: none; } - ⚠️ 别在 media query 里调用
useMediaQuery，styled函数里无 React 上下文
最容易被忽略的是：插值函数返回空字符串（比如 ${props => props.loading && 'opacity: 0.6;'}），浏览器不会报错，但那段样式直接消失——它运行了，只是返回了无效内容。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
