CSS Objects and Style Functions

Starting from version v1.12.0, @vue-styled-components/core supports CSS objects and style functions, providing more flexible ways to define component styles.

CSS Object Support

You can now pass CSS objects directly to styled components instead of template literals.

Benefits

• Type Safety: Better TypeScript support with autocomplete for CSS properties
• Dynamic Values: Easier to work with computed values and variables
• Readability: More structured and readable for complex styles

Style Functions

Style functions allow you to create dynamic styles based on component props.

Props Chain Calling

You can use the .props() method to define component props separately, then chain with element methods.

Combined Usage

You can combine props definition with style functions for more complex components.

Key Features

1. CSS Object Conversion: Automatically converts camelCase CSS properties to kebab-case
2. Style Functions: Support functions that receive props and return CSS objects
3. Props Chain Calling: Define component props through .props() method, then chain with element methods
4. Type Safety: Full TypeScript support ensuring type safety for props and styles
5. Backward Compatibility: Maintains full compatibility with existing template string syntax