用 styled 创建带样式的 React 组件需调用 styled 函数传入 HTML 标签或组件，返回可接收 props、支持 ref 和 memo 的新组件；支持插值注入 props 或函数，推荐用 theme 对象而非全局 CSS 变量管理主题，避免重复创建组件和滥用 as。
怎么用 styled 创建带样式的 React 组件
直接调用 styled 函数，传入一个 HTML 标签名或已有 React 组件，返回一个新组件。它不是“写 CSS”，而是“把样式逻辑绑定到组件上”。
- 基础写法：
const Button = styled.button`color: blue;`—— 返回的Button是个真实 React 组件，能接收props、能加ref、能被React.memo包裹 - 支持插值：用
${}注入 props 或函数，比如styled.div`opacity: ${props => props.disabled ? 0.5 : 1};` - 别用
class或id：生成的类名是哈希化的，靠 props 控制状态比靠 class 切换更可靠 - 注意：不能在条件渲染外层直接写
styled.xxx（比如函数里每次调用），会重复创建组件，触发不必要的重渲染
为什么 props 传不进样式里？常见错误现象和修复
写成 styled.div`color: ${props.color};` 却没生效，通常是因为 props 没传进来，或者插值函数没返回值。
- 确保 JSX 中确实传了对应 prop：
<mydiv color="red"></mydiv>，而不是只在样式里写了插值却忘了传 - 插值必须是函数或原始值；写成
${props.color || 'black'}没问题，但${props.colors?.[0]}要小心 undefined 导致样式解析失败 - 如果用了 TypeScript，
styled.div默认 props 类型是空对象，得显式泛型扩展：styled.div`font-size: ${p => p.size === 'sm' ? '12px' : '16px'};` - 避免在插值里写副作用逻辑（比如
console.log），样式函数可能被多次调用，且不保证执行时机
as 和 withComponent 有什么区别？什么时候该换标签
两者都用于改变最终渲染的 HTML 标签，但语义和使用时机不同。
vercel-react-best-practices
下载
来自 Vercel Engineering 的 React 和 Next.js 性能优化指南。用于编写、审查或重构 React/Next.js 代码以确保最佳性
-
as是临时覆盖，适合单次使用：<button as="a" href="/login">登录</button>，不会影响Button本身的默认行为 -
withComponent是创建新组件，比如const LinkButton = Button.withComponent('a')，之后所有LinkButton都默认渲染为a - 别滥用
as去绕过语义：比如把button强制as="div"又手动加onClick和role="button"，不如一开始就用styled.div+ 手动处理可访问性 -
as不会继承原组件的 defaultProps 或 propTypes，容易漏掉必要 prop 校验
样式复用和主题怎么搞？别硬塞全局 CSS 变量
Styled-Components 自带主题支持，但很多人误以为要靠 :root 或 css 导出变量，其实主题对象才是正路。
立即学习“前端免费学习笔记（深入）”；
- 用
ThemeProvider提供主题对象，子组件通过props.theme拿值：color: ${p => p.theme.primary}; - 避免在多个
styled组件里重复写相同颜色逻辑，抽成函数更可控：const themeColor = (key) => (p) => p.theme[key] || '#000';，然后color: ${themeColor('text')}; - 主题对象不要嵌套太深，
theme.colors.primary比theme.designSystem.tokens.color.primary更易维护 - 主题更新时，所有依赖它的组件都会重渲染——如果主题里塞了大对象或频繁变动的值（比如时间戳），性能会明显下滑
styled.div 的插值函数，可能影响十几个地方的视觉表现，而且 IDE 很难跳转定位。动手前先想清楚：这个样式变化，到底是组件状态的一部分，还是纯展示配置？ 
