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