必须用函数插值，如${props => props.primary ? '#007bff' : '#6c757d'}，直接读取props.primary会报错；需处理undefined、避免引用变动导致class爆炸，并正确结合theme与props。
必须用函数插值，不能直接读取 props
直接写 ${props.primary} 会报 TypeError: Cannot read property 'primary' of undefined——因为 styled-components 在生成 CSS 规则时，props 还没注入。必须用函数形式延迟求值：${props => props.primary ? 'blue' : 'gray'}。
常见错误包括：漏掉箭头函数、把插值写成 ${props => { return ... }}（多了一层花括号导致返回 undefined）、或在模板字符串外提前解构 const { primary } = props（此时 props 还未定义）。
- 正确写法：
const Button = styled.button`color: ${props => props.primary ? '#007bff' : '#6c757d'};` - 错误写法：
const Button = styled.button`color: ${props.primary};` - 布尔 props 要显式转为 CSS 值：
opacity: ${props => props.disabled ? 0.5 : 1}，不能只写${props.disabled}
处理 undefined 和默认值的稳妥写法
props 可能缺失（比如父组件没传 size），插值里不 guard 就会返回 undefined，CSS 解析失败或静默失效。别依赖运行时 fallback，要在插值里兜底。
推荐用解构默认值：font-size: ${({ size = '14px' }) => size};；或逻辑判断：background: ${props => props.bg || '#fff'};；嵌套属性务必可选链：color: ${props => props.theme?.colors?.text || '#333'};。
使用 @ainative/react-sdk 为 React 应用添加 AI 聊天和积分。适用于 (1) 安装 @ainative/react-sdk，(2) 使用 useChat hook 实现聊天完成。
- 避免
${props => props.margin}px→ 改成${props => (props.margin ?? 0) + 'px'}，防止undefinedpx - 慎用三元嵌套，复杂逻辑抽成独立函数：
const getPadding = ({ size }) => size === 'lg' ? '12px 24px' : '8px 16px';，再写${getPadding} - 不要在插值里调用
useState或读闭包变量——这里不是 React 组件上下文，只是纯函数
高频变动值会引发 class 名爆炸
每次渲染都执行插值函数，如果 props 是新引用（如 { x: e.clientX, y: e.clientY }）或随机值（Math.random()），styled-components 会认为样式变了，不断生成新 class 并注入 style 标签，内存涨、重排频繁、DevTools 里 class 名疯狂滚动。
适合传的 props 是离散、低频变更的：状态类（disabled、loading）、尺寸类（size="sm"）、主题类（variant="dark"）。实时坐标、滚动偏移、动画帧值一律改用 style 属性或 useEffect + ref 操作 DOM。
- 反例：
<box position="{{" x y></box>→position每次都是新对象，class 名不停新增 - 正例：
<box positionx="{x}" positiony="{y}"></box>，且仅当真正变化时才更新这些 props（配合useMemo或节流） - 用
shouldForwardProp过滤非 CSS 相关 props：styled.div.withConfig({ shouldForwardProp: prop => !['x', 'y'].includes(prop) })
theme 和 props 混用时注意层级与顺序
props.theme 必须由 ThemeProvider 注入，没它就是 undefined。theme 提供基础设计系统（颜色、间距函数），props 提供实例级覆盖，二者无内置优先级——谁在插值表达式里写得靠后、逻辑更具体，谁就生效。
典型写法是用 props 覆盖 theme：color: ${props => props.color || props.theme.colors.text};。但要注意命名冲突，比如同时有 props.size 和 props.theme.sizes.large，就得明确区分语义，否则容易覆盖错。
- theme 对象必须是 plain object，不能含函数或 getter（SSR 会序列化失败）
- typeScript 下必须装
@types/styled-components，否则props.theme类型推导失效 - 别在样式函数里读 context 或自定义 hook 返回值——props 是唯一合法输入源
React.memo 拦截？theme 是否真的挂载到了根节点？这些比怎么写三元判断更容易导致样式不更新。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
