CSS 转 Styled Components

Styled Components 是 React 生态中最流行的 CSS-in-JS 方案之一，通过 ES6 的标签模板字面量（Tagged Template Literals）语法，让你在 JavaScript/TypeScript 文件中直接编写 CSS 样式。其核心优势包括：

✅ 自动管理样式作用域：每个组件生成唯一的 class 名，彻底避免样式冲突。
✅ 动态样式：基于 props 轻松实现条件样式，无需手动切换 class。
✅ 组件化思维：样式与组件逻辑内聚，提升代码可维护性。
✅ 完全兼容 CSS：支持伪类、伪元素、媒体查询、关键帧动画等所有 CSS 特性。
✅ 自动前缀：自动为需要浏览器前缀的属性添加 vendor prefix。
✅ SSR 友好：服务端渲染时自动收集关键 CSS，优化首屏加载。

本工具智能解析 CSS 代码结构：

🔹 纯属性输入：如果输入只有 CSS 属性（如 color: red;），直接包裹在 styled.标签\`...\` 中。
🔹 带选择器的完整规则：自动提取选择器名称并转换为驼峰命名的组件名（如 .my-button → MyButton）。
🔹 伪类和伪元素：:hover、::before 等自动转换为 &:hover、&::before 格式。
🔹 媒体查询：@media 规则完整保留在模板字面量中。
🔹 嵌套规则：支持 SCSS/Less 风格的嵌套写法，自动处理 & 父选择器引用。
🔹 多规则块：多个顶层 CSS 规则将分别生成独立的 Styled Components。

不需要！在 Styled Components 的模板字面量中，CSS 属性名完全可以使用原生的连字符写法（kebab-case），例如 background-color、border-radius、font-size 都直接有效。

这是因为模板字面量中的内容被当作纯 CSS 字符串处理，styled-components 在运行时会正确解析。当然，如果你在 style 对象或内联样式中使用，则需要驼峰命名（如 backgroundColor），但在 styled 的模板字面量中保持 CSS 原样即可。本工具默认保持 CSS 属性名的原始格式。

Styled Components 的核心优势之一就是基于 props 的动态样式。在模板字面量中，使用 ${...} 插值语法访问组件的 props：

const Button = styled.button`
  background-color: ${props => props.$primary ? '#6366f1' : '#94a3b8'};
  padding: ${props => props.$size === 'lg' ? '16px 32px' : '8px 16px'};
  opacity: ${props => props.$disabled ? 0.6 : 1};
  cursor: ${props => props.$disabled ? 'not-allowed' : 'pointer'};
`;

使用时：<Button $primary $size="lg">提交</Button>
使用 $ 前缀（transient props）可避免将样式 props 传递到 DOM 元素上。本工具生成的基础代码可以方便地扩展为动态样式。

完全可以！本工具生成的代码遵循 Styled Components 官方标准语法，可以直接复制到 React 项目中使用。

使用前请确保：
📦 已安装 styled-components：npm install styled-components
📝 如果开启了 TypeScript 模式，建议同时安装类型定义：npm install -D @types/styled-components
🔧 如果使用 Next.js，需要在 next.config.js 中启用 styledComponents 支持。
⚡ 对于 Vite 项目，styled-components 开箱即用，无需额外配置。

工具生成的 import 语句会自动包含在输出中（可通过开关控制），方便直接复制使用。

不同方案各有适用场景，以下是简要对比：

方案	优势	适用场景
Styled Components	动态样式、组件化、JS 逻辑与样式深度融合	React 重度项目、需要动态主题切换
CSS Modules	零运行时开销、保留原生 CSS 体验	追求性能、团队习惯传统 CSS
Tailwind CSS	原子化类名、极速原型开发、高度一致的设计系统	快速迭代、Utility-first 偏好

Styled Components 特别适合需要基于组件状态动态调整样式的场景，以及希望样式逻辑与组件逻辑紧密内聚的团队。

🔹 @keyframes：在 Styled Components 中，推荐使用 keyframes 辅助函数定义动画，然后引用。不过模板字面量中直接写 @keyframes 也能部分工作，但可能产生重复的动画名。建议手动将 @keyframes 提取为独立的 keyframes 声明。

🔹 全局样式：对于全局样式（如 body、* 选择器），应使用 Styled Components 提供的 createGlobalStyle API，而非普通的 styled.xxx。本工具主要处理组件级样式，如需全局样式，请手动使用 createGlobalStyle。

🔹 @font-face：建议在全局样式或 CSS 文件中定义字体，也可在 createGlobalStyle 中使用。