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> **NOTE**
10>
11> This decorator can be used in ArkTS widgets since API version 9.
12>
13> This decorator can be used in atomic services since API version 11.
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>
32> This decorator can be used only in the current file and cannot be exported.
33>
34
35  ```ts
36  // Global (outside a component declaration)
37  @Styles function functionName() { ... }
38
39  // Inside a component declaration
40  @Component
41  struct FancyUse {
42    @Styles fancy() {
43      .height(100)
44    }
45  }
46  ```
47
48To allow for cross-file operations, use the [attribute modifier](../reference/apis-arkui/arkui-ts/ts-universal-attributes-attribute-modifier.md).
49
50  ```ts
51  // index.ets
52  import { MyButtonModifier } from './setAttribute'
53
54  @Entry
55  @Component
56  struct attributeDemo {
57    @State modifier: MyButtonModifier = new MyButtonModifier()
58
59    build() {
60      Row() {
61        Column() {
62          Button("Button")
63            .attributeModifier(this.modifier)
64            .onClick(() => {
65              this.modifier.isDark = !this.modifier.isDark
66            })
67        }
68        .width('100%')
69      }
70      .height('100%')
71    }
72  }
73  ```
74
75  ```ts
76  // setAttribute.ets
77  export class MyButtonModifier implements AttributeModifier<ButtonAttribute> {
78    isDark: boolean = false
79    applyNormalAttribute(instance: ButtonAttribute): void {
80      if (this.isDark) {
81        instance.backgroundColor(Color.Black)
82      } else {
83        instance.backgroundColor(Color.Red)
84      }
85    }
86  }
87  ```
88
89- \@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:
90
91  ```ts
92  @Component
93  struct FancyUse {
94    @State heightValue: number = 100
95    @Styles fancy() {
96      .height(this.heightValue)
97      .backgroundColor(Color.Yellow)
98      .onClick(() => {
99        this.heightValue = 200
100      })
101    }
102  }
103  ```
104
105- The priority of \@Styles defined inside a component declaration is higher than that of \@Styles defined outside a component declaration.
106  The framework preferentially searches for \@Styles within the current component.
107
108
109## Application Scenarios
110
111The following example demonstrates the usage of \@Styles inside and outside a component declaration.
112
113```ts
114// Define a \@Styles decorated method outside a component declaration.
115@Styles function globalFancy  () {
116  .width(150)
117  .height(100)
118  .backgroundColor(Color.Pink)
119}
120
121@Entry
122@Component
123struct FancyUse {
124  @State heightValue: number = 100
125  // Define a \@Styles decorated method inside a component declaration.
126  @Styles fancy() {
127    .width(200)
128    .height(this.heightValue)
129    .backgroundColor(Color.Yellow)
130    .onClick(() => {
131      this.heightValue = 200
132    })
133  }
134
135  build() {
136    Column({ space: 10 }) {
137      // Use the \@Styles decorated method defined outside a component declaration.
138      Text('FancyA')
139        .globalFancy()
140        .fontSize(30)
141      // Use the @Styles decorated method defined inside a component declaration.
142      Text('FancyB')
143        .fancy()
144        .fontSize(30)
145    }
146  }
147}
148```
149