We use essential cookies for the website to function, as well as analytics cookies for analyzing and creating statistics of the website performance. To agree to the use of analytics cookies, click "Accept All". You can manage your preferences at any time by clicking "Cookie Settings" on the footer. More Information.

Cookie Settings
Only Essential Cookies
Accept All
MaterialsConsole

HarmonyOS

输入关键字搜索
HMS Core
AppGallery Connect
HUAWEI HiAI
CTRL+K
GuidesApplication FrameworkArkUIUI Development (ArkTS-based Declarative Development Paradigm)Basic Syntax of UI ParadigmsComponent ExtensionstateStyles: Applying Polymorphic Styles

stateStyles: Applying Polymorphic Styles

Last updated: 2026-06-02 07:02
Content overview

Unlike @Styles, which are used to reuse styles only on static pages, stateStyles enables you to set dynamic, state-specific styles. This topic explores the implementation of polymorphic styles through stateStyles.

NOTE

Polymorphic styles support only universal attributes. If a polymorphic style does not take effect, the attribute may be a private, component-specific attribute, for example, fontColor or backgroundColor of the TextInput component. In this case, you can use attributeModifier to dynamically set component attributes to enable the polymorphic style.

Overview

stateStyles 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:

  • focused

  • normal

  • pressed

  • disabled

  • clicked

  • selected10+

NOTE

Currently, the focused state can be triggered only by pressing the Tab or arrow keys on an external keyboard. Triggering through key presses in nested scrollable components is not supported.

Use Scenarios

Common Scenarios

This example shows the most basic application scenario of stateStyles. Button1 is the first component and Button2 the second component. When either of these components is pressed, the black style specified for pressed takes effect. When the Tab key is pressed for sequential navigation, Button1 obtains focus and is displayed in the pink style specified for focused. When Button 2 is focused, it is displayed in the pink style specified for focused, and Button1 changes to the blue style specified for normal.

Collapse
Word wrap
Dark theme
Copy code
  1. @Entry
  2. @Component
  3. struct StateStylesSample {
  4.   build() {
  5.     Column() {
  6.       Button('Button1')
  7.         .stateStyles({
  8.           focused: {
  9.             .backgroundColor('#ffffeef0')
  10.           },
  11.           pressed: {
  12.             .backgroundColor('#ff707070')
  13.           },
  14.           normal: {
  15.             .backgroundColor('#ff2787d9')
  16.           }
  17.         })
  18.         .margin(20)
  19.       Button('Button2')
  20.         .stateStyles({
  21.           focused: {
  22.             .backgroundColor('#ffffeef0')
  23.           },
  24.           pressed: {
  25.             .backgroundColor('#ff707070')
  26.           },
  27.           normal: {
  28.             .backgroundColor('#ff2787d9')
  29.           }
  30.         })
  31.     }.margin('30%')
  32.   }
  33. }
StateStylesSample.ets

Figure 1 Focused and pressed states

Combined Use of @Styles and stateStyles

The following example uses @Styles to specify different states of stateStyles.

Collapse
Word wrap
Dark theme
Copy code
  1. @Entry
  2. @Component
  3. struct MyComponent {
  4.   @Styles normalStyle() {
  5.     .backgroundColor(Color.Gray)
  6.   }
  7. 

  8.   @Styles pressedStyle() {
  9.     .backgroundColor(Color.Red)
  10.   }
  11.   build() {
  12.     Column() {
  13.       Text('Text1')
  14.         .fontSize(50)
  15.         .fontColor(Color.White)
  16.         .stateStyles({
  17.           normal: this.normalStyle,
  18.           pressed: this.pressedStyle,
  19.         })
  20.     }
  21.   }
  22. }
MyComponent.ets

Figure 2 Normal and pressed states

Using Regular Variables and State Variables in stateStyles

stateStyles can use this to bind regular variables and state variables in a component.

Collapse
Word wrap
Dark theme
Copy code
  1. @Entry
  2. @Component
  3. struct CompWithInlineStateStyles {
  4.   @State focusedColor: Color = 0xD5D5D5;
  5.   normalColor: Color = 0x004AAF;
  6. 

  7.   build() {
  8.     Column() {
  9.       Button('clickMe')
  10.         .height(100)
  11.         .width(100)
  12.         .stateStyles({
  13.           normal: {
  14.             .backgroundColor(this.normalColor)
  15.           },
  16.           focused: {
  17.             .backgroundColor(this.focusedColor)
  18.           }
  19.         })
  20.         .onClick(() => {
  21.           this.focusedColor = 0x707070;
  22.         })
  23.         .margin('30%')
  24.     }
  25.   }
  26. }
CompWithInlineStateStyles.ets

By default, the button is displayed in blue in the normal state. When you press the Tab key for the first time, the button obtains focus and is displayed in the light gray style specified for focused. After a click event occurs and you press the Tab key again, the button obtains focus and changes to dark gray.

Figure 3 Change of the styles in focused state by a click

@Extend Decorator: Defining Extended Component Styles
@AnimatableExtend Decorator: Defining Animatable Properties
English
©2026 HUAWEI Developers. All rights reserved.
Terms of Use
Statement About HUAWEI Developers and Privacy
Cookies
Cookie Settings
Open-Source Software Notice
Search in Guides
Enter a keyword.