1# stateStyles: Polymorphic Style
2
3
4Unlike \@Styles, which are used to reuse styles only on static pages, stateStyles enables you to set state-specific styles.
5
6> **NOTE**
7>
8> Polymorphic style supports only universal attributes.
9
10## Overview
11
12stateStyles is an attribute method that sets the style based on the internal state of a component. It is similar to a CSS pseudo-class, with different syntax. ArkUI provides the following states:
13
14- focused
15
16- normal
17
18- pressed
19
20- disabled
21
22- selected<sup>10+</sup>
23
24
25## Application Scenarios
26
27
28### Common Scenarios
29
30This example shows the most basic application scenario of stateStyles. **Button1** is the first component and **Button2** the second component. When the component is pressed, the black style specified for **pressed** takes effect. When the Tab key is pressed for sequential navigation, **Button1** obtains focus first and is displayed in the pink style specified for **focus**. When **Button 2** is focused, it is displayed in the pink style specified for **focus**, and **Button1** changes to the blue style specified for **normal**.
31
32
33```ts
34@Entry
35@Component
36struct StateStylesSample {
37  build() {
38    Column() {
39      Button('Button1')
40        .stateStyles({
41          focused: {
42            .backgroundColor('#ffffeef0')
43          },
44          pressed: {
45            .backgroundColor('#ff707070')
46          },
47          normal: {
48            .backgroundColor('#ff2787d9')
49          }
50        })
51        .margin(20)
52      Button('Button2')
53        .stateStyles({
54          focused: {
55            .backgroundColor('#ffffeef0')
56          },
57          pressed: {
58            .backgroundColor('#ff707070')
59          },
60          normal: {
61            .backgroundColor('#ff2787d9')
62          }
63        })
64    }.margin('30%')
65  }
66}
67```
68
69
70  **Figure 1** Focused and pressed states
71
72![Video_2023-03-17_120758](figures/Video_2023-03-17_120758.gif)
73
74
75### Combined Use of \@Styles and stateStyles
76
77The following example uses \@Styles to specify different states of stateStyles.
78
79```ts
80@Entry
81@Component
82struct MyComponent {
83  @Styles normalStyle() {
84    .backgroundColor(Color.Gray)
85  }
86
87  @Styles pressedStyle() {
88    .backgroundColor(Color.Red)
89  }
90
91  build() {
92    Column() {
93      Text('Text1')
94        .fontSize(50)
95        .fontColor(Color.White)
96        .stateStyles({
97          normal: this.normalStyle,
98          pressed: this.pressedStyle,
99        })
100    }
101  }
102}
103```
104
105  **Figure 2** Normal and pressed states
106
107![Video_2023-03-17_144824](figures/Video_2023-03-17_144824.gif)
108
109
110### Using Regular Variables and State Variables in stateStyles
111
112stateStyles can use **this** to bind regular variables and state variables in a component.
113
114
115```ts
116@Entry
117@Component
118struct CompWithInlineStateStyles {
119  @State focusedColor: Color = Color.Red;
120  normalColor: Color = Color.Green
121
122  build() {
123    Column() {
124      Button('clickMe').height(100).width(100)
125        .stateStyles({
126          normal: {
127            .backgroundColor(this.normalColor)
128          },
129          focused: {
130            .backgroundColor(this.focusedColor)
131          }
132        })
133        .onClick(() => {
134          this.focusedColor = Color.Pink
135        })
136        .margin('30%')
137    }
138  }
139}
140```
141
142By default, the button is displayed in green in the normal state. When you press the Tab key for the first time, the button obtains focus and is displayed in the red style specified for **focus**. After a click event occurs and you press the Tab key again, the button obtains focus and changes to the pink style.
143
144  **Figure 3** Change of the styles in focused state by a click
145
146![Video_2023-03-17_144605](figures/Video_2023-03-17_144605.gif)
147
148