What are HarmonyOS NEXT-StyleDecorator:@Styles and @Extend?

HarmonyOS NEXT - Style Decorator：
If the style of each component needs to be set separately, there will be a large amount of code repeating style settings during the development process. Although it can be copied and pasted, for the sake of code simplicity and easy maintenance in the future, @styles, a decorator that can extract common styles for reuse, has been introduced.

Styles decorator can extract multiple style settings into one method, which can be called directly at the location of the component declaration.
Styles Decorators allows for quick definition and reuse of custom styles.

Styles Decorator: Define Component Reuse Styles
Styles Decorators can extract multiple style settings into one method, which can be called directly at the location of the component declaration.
Styles Decorators allows for quick definition and reuse of custom styles.

Disadvantages of Styles Decorators:
Styles Decorators only supports universal properties and universal events.
Styles Decorators method does not support parameters

Styles Decorator Restrictions:
Styles Decorators method cannot have parameters, and an error will be reported during compilation, reminding developers that the @ Styles method does not support parameters.
Styles Decorators method does not support the use of logical components, and properties within logical components do not take effect.

@Extend is used to extend native component styles

@Extend(UIComponentName) function functionName { ... }

@Extend only supports global definition and does not support definition within components
The method of @Extend decoration supports parameters

@Extend Usage Rules
·@Extend supports encapsulating private properties, private events, and globally defined methods of specified components.
·The @Extend decoration method supports parameters, and developers can pass parameters when calling, following the TS method for value passing calls.
·The parameter of the @Extend decoration method can be a function, which serves as a handle for the Event event.
·The parameter of @Extend can be a state variable, and when the state variable changes, the UI can be refreshed and rendered normally.

@Extend Restrictions
@Extend only supports global definition and does not support definition within components.

Code Examples

@Entry
@Component
struct StylesPage {
  @State message: string = '@Styles And @Extend';

  @Styles
  reuseStyle(){
    .backgroundColor(Color.Orange)
    .width(200)
    .margin(10)
    // .fontSize(20)
  }

  build() {
    Column() {
      Text(this.message)
        .fontSize(20)
        .fontWeight(FontWeight.Bold)

      Text('1').reuseStyle()
      Text('2').reuseStyle()
      Text('3').reuseStyle()

      Text('a').textStyle(100)
      Text('b').textStyle(150)
      Text('c').textStyle(200)
    }
    .height('100%')
    .width('100%')
  }
}

@Extend(Text)
function textStyle(w:number){
  .width(w)
  .backgroundColor(Color.Green)
  .margin(10)
  .fontSize(20)
}

Combining @styles and stateStyles
@styles is only used for style reuse on static pages, stateStyles can quickly set different styles based on the internal state of components.
Code Examples

@Entry
@Component
struct MyComponent {
  @Styles normalStyle() {
    .backgroundColor(Color.Gray)
  }

  @Styles pressedStyle() {
    .backgroundColor(Color.Red)
  }

  build() {
    Column() {
      Text('Text1')
        .fontSize(50)
        .fontColor(Color.White)
        .stateStyles({
          normal: this.normalStyle,
          pressed: this.pressedStyle,
        })
    }
  }
}

StateStyles can bind regular and state variables within a component through this

@Entry
@Component
struct CompWithInlineStateStyles {
  @State focusedColor: Color = Color.Red;
  normalColor: Color = Color.Green

  build() {
    Column() {
      Button('clickMe').height(100).width(100)
        .stateStyles({
          normal: {
            .backgroundColor(this.normalColor)
          },
          focused: {
            .backgroundColor(this.focusedColor)
          }
        })
        .onClick(() => {
          this.focusedColor = Color.Pink
        })
        .margin('30%')
    }
  }
}