Function: Rule()
function Rule(selector: string): <This, Value>(target: (this: This) => Value, context: ClassGetterDecoratorContext<This, Value>) => (this: This) => Value;
Defined in: src/styles/decorators/rule.ts:290
Parameters
| Parameter | Type |
|---|---|
selector |
string |
Returns
<This, Value>(target: (this: This) => Value, context: ClassGetterDecoratorContext<This, Value>): (this: This) => Value;
Type Parameters
| Type Parameter |
|---|
This extends object |
Value extends CSSProperties | undefined |
Parameters
| Parameter | Type |
|---|---|
target |
(this: This) => Value |
context |
ClassGetterDecoratorContext<This, Value> |
Returns
(this: This): Value;
Parameters
| Parameter | Type |
|---|---|
this |
This |
Returns
Value
Rule
Decorator - Type-safe reactive CSS rules
Usage:
class MyStyles extends BaseStyleSheet {
@State width = 100;
@Rule(':host')
get hostStyles() {
return {
display: 'grid',
width: this.width, // Reactive!
};
}
}