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