1# stateStyles: Polymorphic Style 2 3 4Unlike \@Styles and \@Extend, which are used to reuse styles only on static pages, stateStyles enables you to set state-specific styles. 5 6 7## Overview 8 9stateStyles 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: 10 11- focused 12 13- normal 14 15- pressed 16 17- disabled 18 19- selected<sup>10+</sup> 20 21 22## Application Scenarios 23 24 25### Common Scenarios 26 27This example shows the most basic application scenario of stateStyles. The **\<Button>** component is the first component and is in the default focused state, where the pink style specified for **focused** takes effect. When the component is pressed, the black style specified for **pressed** takes effect. If you place another component before the **\<Button>** component and have it in the normal state, the yellow style specified for **normal** takes effect. 28 29 30```ts 31@Entry 32@Component 33struct StateStylesSample { 34 build() { 35 Column() { 36 Button('Click me') 37 .stateStyles({ 38 focused: { 39 .backgroundColor(Color.Pink) 40 }, 41 pressed: { 42 .backgroundColor(Color.Black) 43 }, 44 normal: { 45 .backgroundColor(Color.Yellow) 46 } 47 }) 48 }.margin('30%') 49 } 50} 51``` 52 53 54 **Figure 1** Focused and pressed states 55 56 57 58 59### Combined Use of \@Styles and stateStyles 60 61The following example uses \@Styles to specify different states of stateStyles. 62 63 64 65```ts 66@Entry 67@Component 68struct MyComponent { 69 @Styles normalStyle() { 70 .backgroundColor(Color.Gray) 71 } 72 73 @Styles pressedStyle() { 74 .backgroundColor(Color.Red) 75 } 76 77 build() { 78 Column() { 79 Text('Text1') 80 .fontSize(50) 81 .fontColor(Color.White) 82 .stateStyles({ 83 normal: this.normalStyle, 84 pressed: this.pressedStyle, 85 }) 86 } 87 } 88} 89``` 90 91 **Figure 2** Normal and pressed states 92 93 94 95 96### Using Regular Variables and State Variables in stateStyles 97 98stateStyles can use **this** to bind regular variables and state variables in a component. 99 100 101```ts 102@Entry 103@Component 104struct CompWithInlineStateStyles { 105 @State focusedColor: Color = Color.Red; 106 normalColor: Color = Color.Green 107 108 build() { 109 Button('clickMe').height(100).width(100) 110 .stateStyles({ 111 normal: { 112 .backgroundColor(this.normalColor) 113 }, 114 focused: { 115 .backgroundColor(this.focusedColor) 116 } 117 }) 118 .onClick(() => { 119 this.focusedColor = Color.Pink 120 }) 121 .margin('30%') 122 } 123} 124``` 125 126By default, the **\<Button>** component is in red when focused. After a click event is triggered, it turns to pink when focused. 127 128 **Figure 3** Change of the styles in focused state by a click 129 130 131
