CSS 对象和样式函数

从 v1.12.0 版本开始，@vue-styled-components/core 支持 CSS 对象和样式函数，提供更灵活的组件样式定义方式。

CSS 对象支持

现在您可以直接向样式化组件传递 CSS 对象，而不是模板字符串。

优势

• 类型安全: 更好的 TypeScript 支持，CSS 属性自动补全
• 动态值: 更容易处理计算值和变量
• 可读性: 复杂样式更结构化和可读

样式函数

样式函数允许您基于组件属性创建动态样式。

Props 链式调用

您可以使用 .props() 方法单独定义组件属性，然后与元素方法链式调用。

组合使用

您可以将属性定义与样式函数结合使用，创建更复杂的组件。

核心特性

1. CSS 对象转换: 自动将驼峰命名的 CSS 属性转换为 kebab-case
2. 样式函数: 支持接收 props 参数并返回 CSS 对象的函数
3. Props 链式调用: 通过 .props() 方法定义组件 props，然后链式调用元素方法
4. 类型安全: 完整的 TypeScript 类型支持，确保 props 和样式的类型安全
5. 向后兼容: 保持与现有模板字符串语法的完全兼容