Customization
Style Rules
A guide on component-specific style rules.
A rule-based configuration system that allows you to conditionally style components based on applyBy attributes and optional $where clauses. It provides flexibility in applying styles based on various conditions.
Field Breakdown
| Field | Type | Description |
|---|---|---|
applyBy | A(e.g., "id" or "class") | Determines the condition type used to match the component. Optional. |
value | V | The value to apply (e.g., a class name, a style variant). |
$where | { attr: A; is: string } | Optional matching condition for more precise targeting. |
Usage Example
layout.tsx
How It Works
When rendering a component (e.g., a Button), the system will:
1. Look for styleRules.button.
2. Filter rules by applyBy (like id, variant or class).
3. Check if $where matches the component’s current attributes.
4. Apply the corresponding value (e.g., class name, radius, etc).
This allows styles to be dynamic, conditional, and scoped, giving you full control at a global level.