• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# \@Styles: Definition of Resusable 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/arkui-ts/ts-universal-attributes-size.md) and [universal events](../reference/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 component name must be preceded by the keyword **function**.
29
30  ```ts
31  // Global (outside a component declaration)
32  @Styles function functionName() { ... }
33
34  // Inside a component declaration
35  @Component
36  struct FancyUse {
37    @Styles fancy() {
38      .height(100)
39    }
40  }
41  ```
42
43- \@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:
44
45  ```ts
46  @Component
47  struct FancyUse {
48    @State heightVlaue: number = 100
49    @Styles fancy() {
50      .height(this.heightVlaue)
51      .backgroundColor(Color.Yellow)
52      .onClick(() => {
53        this.heightVlaue = 200
54      })
55    }
56  }
57  ```
58
59- The priority of \@Styles defined inside a component declaration is higher than that of \@Styles defined outside a component declaration.
60  The framework preferentially searches for \@Styles within the current component.
61
62
63## Application Scenarios
64
65The following example demonstrates the usage of \@Styles inside and outside a component declaration.
66
67
68
69```ts
70// Define a \@Styles decorated method outside a component declaration.
71@Styles function globalFancy  () {
72  .width(150)
73  .height(100)
74  .backgroundColor(Color.Pink)
75}
76
77@Entry
78@Component
79struct FancyUse {
80  @State heightVlaue: number = 100
81  // Define a \@Styles decorated method inside a component declaration.
82  @Styles fancy() {
83    .width(200)
84    .height(this.heightVlaue)
85    .backgroundColor(Color.Yellow)
86    .onClick(() => {
87      this.heightVlaue = 200
88    })
89  }
90
91  build() {
92    Column({ space: 10 }) {
93      // Use the \@Styles decorated method defined outside a component declaration.
94      Text('FancyA')
95        .globalFancy ()
96        .fontSize(30)
97      // Use the \@Styles decorated method defined outside a component declaration.
98      Text('FancyB')
99        .fancy()
100        .fontSize(30)
101    }
102  }
103}
104```
105