styled-components 默认抹掉 className 是因为它将 className 当作普通 prop 处理，不自动合并到 DOM 元素上；必须用函数式写法显式透传，如 styled(({ className, ...props }) => <button className={className} {...props} />)...;as 不影响透传逻辑，但目标组件也需转发 className。
为什么 styled-components 默认会抹掉你写的 className
因为 styled-components 的底层逻辑是“接管样式”，它把传入的 className 当作普通 prop 处理，不会自动合并进最终渲染的 DOM 节点——除非你显式转发。测试时用 data-testid 是绕路，真正要挂钩原有类名（比如 btn-primary），得让组件把 className 透传给底层元素。
怎么让 styled 组件接收并透传 className
在自定义 styled 组件内部，必须手动把 className 加到最终返回的 JSX 元素上。否则 React 不会自动合并，styled-components 生成的 class 和你传的 class 会互斥。
- 基础写法：用解构 + 扩展运算符，把
className显式传给底层元素 - 错误示范：
const Button = styled.button`...`—— 这种简写不支持透传，className直接丢弃 - 正确写法：改用函数式写法，并确保
className出现在最终 JSX 中
const Button = styled.button`
background: blue;
`;
// ❌ 错误：无法透传 className
const Button = styled(({ className, ...props }) => (
<button className={className} {...props} />
))`
background: blue;
`;
// ✅ 正确：className 被保留并参与最终 class 合并
as 或 forwardedAs 会影响 className 透传吗
不影响透传逻辑本身，但会影响 DOM 元素类型和 class 合并时机。用 as 切换标签时，只要底层元素仍接收 className，就依然有效；但要注意某些 HTML 元素（如 input）对 className 的支持是原生的，而自定义组件若没转发，就会断掉。
-
as="a"或as={Link}都要求目标组件也接收并透传className -
forwardedAs是旧版 API，已废弃，别用 - 如果用
as指向一个未处理className的自定义组件，你的测试类名就消失了
测试时发现类名没出现？先检查这三处
类名丢失不是随机的，基本锁定在这几个环节：
立即学习“前端免费学习笔记（深入）”；
- 组件定义是否用了函数式写法并显式写了
className={className} - 是否在中间层组件（比如封装了
styled的 wrapper）里漏掉了className解构或传递 - 是否在测试中用了
render但没传className—— 比如render(<Button>Click</Button>)就不会有任何额外 class
最常被忽略的是：开发时靠视觉判断样式生效，就默认类名也在；但测试依赖的是 DOM 上真实存在的 class 字符串，差一个透传，就完全挂钩不上。
