• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# \@Styles Decorator: Definition of Reusable Styles
2
3
4If the style of each component needs to be set separately, this will result in a large amount of repeated code during development. Though copy and paste is available, it is inefficient and error-prone. To maximize code efficiency and maintainability, the \@Styles decorator is introduced.
5
6
7\@Styles helps avoid repeated style setting, by extracting multiple style settings into one method. When declaring a component, you can invoke this method and use the \@Styles decorator to quickly define and reuse the custom styles of a component.
8
9
10> **NOTE**
11>
12> Since API version 9, this decorator is supported in ArkTS widgets.
13
14
15## Rules of Use
16
17- \@Styles supports only [universal attributes](../reference/apis-arkui/arkui-ts/ts-universal-attributes-size.md) and [universal events](../reference/apis-arkui/arkui-ts/ts-universal-events-click.md).
18
19- An \@Styles decorated method does not support parameters. The following example is invalid:
20
21  ```ts
22  // Invalid: @Styles does not support parameters.
23  @Styles function globalFancy (value: number) {
24    .width(value)
25  }
26  ```
27
28- \@Styles can be defined inside or outside a component declaration. When it is defined outside a component declaration, the method name must be preceded by the keyword **function**.
29
30> **NOTE**
31> This decorator can be used only in the current file and cannot be exported.
32
33  ```ts
34  // Global (outside a component declaration)
35  @Styles function functionName() { ... }
36
37  // Inside a component declaration
38  @Component
39  struct FancyUse {
40    @Styles fancy() {
41      .height(100)
42    }
43  }
44  ```
45
46- \@Styles defined inside a component declaration can access constants and state variables of the component through **this**, and mutate the values of state variables through events in \@Styles. The following is an example:
47
48  ```ts
49  @Component
50  struct FancyUse {
51    @State heightValue: number = 100
52    @Styles fancy() {
53      .height(this.heightValue)
54      .backgroundColor(Color.Yellow)
55      .onClick(() => {
56        this.heightValue = 200
57      })
58    }
59  }
60  ```
61
62- The priority of \@Styles defined inside a component declaration is higher than that of \@Styles defined outside a component declaration.
63  The framework preferentially searches for \@Styles within the current component.
64
65
66## Application Scenarios
67
68The following example demonstrates the usage of \@Styles inside and outside a component declaration.
69
70
71
72```ts
73// Define a \@Styles decorated method outside a component declaration.
74@Styles function globalFancy  () {
75  .width(150)
76  .height(100)
77  .backgroundColor(Color.Pink)
78}
79
80@Entry
81@Component
82struct FancyUse {
83  @State heightValue: number = 100
84  // Define a \@Styles decorated method inside a component declaration.
85  @Styles fancy() {
86    .width(200)
87    .height(this.heightValue)
88    .backgroundColor(Color.Yellow)
89    .onClick(() => {
90      this.heightValue = 200
91    })
92  }
93
94  build() {
95    Column({ space: 10 }) {
96      // Use the \@Styles decorated method defined outside a component declaration.
97      Text('FancyA')
98        .globalFancy()
99        .fontSize(30)
100      // Use the @Styles decorated method defined inside a component declaration.
101      Text('FancyB')
102        .fancy()
103        .fontSize(30)
104    }
105  }
106}
107```
108