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. If the polymorphic style does not take effect, the attribute may be a private attribute of the component, for example, [fontColor](../reference/apis-arkui/arkui-ts/ts-universal-attributes-text-style.md) or [backgroundColor](../reference/apis-arkui/arkui-ts/ts-universal-attributes-background.md) of the [TextInput](../reference/apis-arkui/arkui-ts/ts-basic-components-textinput.md) component. In this case, you can use [attributeModifier](../reference/apis-arkui/arkui-ts/ts-universal-attributes-attribute-modifier.md#attributemodifier) to dynamically set component attributes to enable the polymorphic style. 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> **NOTE** 25> 26> Currently, only the **Tab** button and arrow buttons on the external keyboard can be used to trigger the focused state. Sequential keyboard navigation is not supported for nested scrollable components. 27 28## Use Scenarios 29 30 31### Common Scenarios 32 33This 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**. 34 35 36```ts 37@Entry 38@Component 39struct StateStylesSample { 40 build() { 41 Column() { 42 Button('Button1') 43 .stateStyles({ 44 focused: { 45 .backgroundColor('#ffffeef0') 46 }, 47 pressed: { 48 .backgroundColor('#ff707070') 49 }, 50 normal: { 51 .backgroundColor('#ff2787d9') 52 } 53 }) 54 .margin(20) 55 Button('Button2') 56 .stateStyles({ 57 focused: { 58 .backgroundColor('#ffffeef0') 59 }, 60 pressed: { 61 .backgroundColor('#ff707070') 62 }, 63 normal: { 64 .backgroundColor('#ff2787d9') 65 } 66 }) 67 }.margin('30%') 68 } 69} 70``` 71 72 73 **Figure 1** Focused and pressed states 74 75 76 77 78### Combined Use of \@Styles and stateStyles 79 80The following example uses \@Styles to specify different states of stateStyles. 81 82```ts 83@Entry 84@Component 85struct MyComponent { 86 @Styles normalStyle() { 87 .backgroundColor(Color.Gray) 88 } 89 90 @Styles pressedStyle() { 91 .backgroundColor(Color.Red) 92 } 93 94 build() { 95 Column() { 96 Text('Text1') 97 .fontSize(50) 98 .fontColor(Color.White) 99 .stateStyles({ 100 normal: this.normalStyle, 101 pressed: this.pressedStyle, 102 }) 103 } 104 } 105} 106``` 107 108 **Figure 2** Normal and pressed states 109 110 111 112 113### Using Regular Variables and State Variables in stateStyles 114 115stateStyles can use **this** to bind regular variables and state variables in a component. 116 117 118```ts 119@Entry 120@Component 121struct CompWithInlineStateStyles { 122 @State focusedColor: Color = Color.Red; 123 normalColor: Color = Color.Green 124 125 build() { 126 Column() { 127 Button('clickMe').height(100).width(100) 128 .stateStyles({ 129 normal: { 130 .backgroundColor(this.normalColor) 131 }, 132 focused: { 133 .backgroundColor(this.focusedColor) 134 } 135 }) 136 .onClick(() => { 137 this.focusedColor = Color.Pink 138 }) 139 .margin('30%') 140 } 141 } 142} 143``` 144 145By 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. 146 147 **Figure 3** Change of the styles in focused state by a click 148 149 150
