Styled Components 控制状态的核心是将样式逻辑内聚于组件，通过 props 传递状态（如布尔值、枚举、主题），在模板字符串中用箭头函数映射样式；结合 useState/useReducer 实现交互响应；避免副作用，拆分状态容器与样式组件，推荐用 attrs() 预设属性、工具函数或自定义 Hook 封装复杂逻辑。
用 Styled Components 控制状态，核心是把样式逻辑从 CSS 文件里“搬”进组件内部，用 JavaScript 的条件、变量和函数来驱动样式变化，而不是靠一堆 class 切换或 CSS-in-JS 的硬编码字符串。
用 props 传递状态，直接映射样式
这是最常用也最清晰的方式。组件接收一个布尔值、枚举或主题字段，Styled Components 内部用箭头函数接收 props 并返回对应样式。
- 比如按钮的 loading 状态：const Button = styled.button`opacity: ${props => props.loading ? 0.6 : 1}; cursor: ${props => props.loading ? 'not-allowed' : 'pointer'};`
- 避免写成 `${props => props.loading && 'opacity: 0.6;'}` 这种拼接片段——容易漏分号、难维护、IDE 不提示错误
- 推荐把复杂判断抽成工具函数，例如 const getBgColor = (type, theme) => theme[type] || theme.default，再在模板中调用
结合 React 状态（useState / useReducer）实时响应
样式不是静态快照，而是状态的视觉投影。把 useState 的值直接传给 styled 组件的 props，就能实现点击变色、悬停高亮、展开收起等交互效果。
React 组件生成器
下载
根据项目规范生成 React 和 Vue 组件，包括 TypeScript 类型定义、Ant Design 5 集成、Tailwind CSS 样式及 Vitest 测试文件。当用户提出创建、生成或搭建前端组件的需求时启用，例如：“帮我写一个表格组件”、“生成一个弹窗”、“create a form component”、“写一个列表页”、“生成一个下拉选择器”。该能力在以下任一场景触发：涉及 React/TSX/Vue 组件生成、UI 组件创建，或为组件生成测试文件。
- 例如折叠面板：用 const [isOpen, setIsOpen] = useState(false)，然后
，样式里根据 props.isOpen 控制 maxHeight 和 transform - 注意不要在 styled 表达式里写副作用（如 setState），只做纯计算；状态更新由事件处理器负责
- 多个相关状态可合并为一个对象 props，避免传十个布尔值，例如 state={{ active: true, disabled: false, size: 'lg' }}
用 attrs() 预设动态属性，减少重复传参
当某类组件总要带相同逻辑（如根据 theme 自动加前缀、根据环境加 data-* 属性），可用 attrs() 提前注入 props，让调用更干净。
立即学习“前端免费学习笔记（深入）”；
- 例如输入框自动加 data-size：const Input = styled.input.attrs(props => ({ 'data-size': props.size || 'md' }))`...`
- 也可以用它桥接 context 或全局配置，比如从 ThemeProvider 读取断点值，自动设置响应式样式
- 注意 attrs 返回的对象会与组件调用时传入的 props 合并，同名 key 以调用时为准（后者覆盖前者）
拆分逻辑：样式组件 + 状态容器，各司其职
别让一个 styled 组件既管渲染又管状态。把状态管理交给普通 React 组件（或自定义 Hook），只把最终确定的状态值传给 styled 组件。
- 例如表单验证：用 useFormValidation() Hook 返回 { isValid, errors, isTouched }，父组件把这些作为 props 透传给 StyledInput
- 这样样式组件保持无状态、可复用、易测试；业务逻辑集中在 Hook 或组件顶层，不散落在各个 styled 定义里
- 如果样式逻辑确实复杂（比如多步流程的状态机），可封装成独立的 useStyleProps() Hook，统一计算并返回样式所需的所有 props
