1. 使用@Styles装饰器（推荐）

// 全局定义样式
[@Styles](/user/Styles)
function buttonStyle() {
  .width('100%')
  .height(50)
  .border({ color: '#CCC', width: 2 })
}

// 组件内使用
@Entry
@Component
struct MyComponent {
  build() {
    Column() {
      Button() {
        Text('button')
      }
      .buttonStyle()  // 应用样式
    }
  }
}

2. 使用@Extend装饰器（支持参数）

// 全局定义扩展样式（支持参数）
[@Extend](/user/Extend)(Button)
function customButtonStyle(
  width: string | number = '100%',
  height: number = 50,
  borderColor: Color = Color.Gray,
  borderWidth: number = 2
) {
  .width(width)
  .height(height)
  .border({ color: borderColor, width: borderWidth })
}

// 组件内使用
@Entry
@Component
struct MyComponent {
  build() {
    Column() {
      Button() {
        Text('button')
      }
      .customButtonStyle()  // 使用默认参数
      
      Button() {
        Text('button2')
      }
      .customButtonStyle('80%', 60, Color.Red, 1)  // 自定义参数
    }
  }
}

3. 使用AttributeModifier（最灵活）

// 定义属性修改器
class ButtonStyleModifier implements AttributeModifier<ButtonAttribute> {
  private widthValue: string | number
  private heightValue: number
  private borderColorValue: Color
  private borderWidthValue: number

  constructor(style: {
    width?: string | number,
    height?: number,
    borderColor?: Color,
    borderWidth?: number
  }) {
    this.widthValue = style.width || '100%'
    this.heightValue = style.height || 50
    this.borderColorValue = style.borderColor || Color.Gray
    this.borderWidthValue = style.borderWidth || 2
  }

  applyNormalAttribute(instance: ButtonAttribute): void {
    instance
      .width(this.widthValue)
      .height(this.heightValue)
      .border({ 
        color: this.borderColorValue, 
        width: this.borderWidthValue 
      })
  }
}

// 组件内使用
@Entry
@Component
struct MyComponent {
  @State modifier: ButtonStyleModifier = new ButtonStyleModifier({
    width: '100%',
    height: 50,
    borderColor: Color.Gray,
    borderWidth: 2
  })

  build() {
    Column() {
      Button() {
        Text('button')
      }
      .attributeModifier(this.modifier)
      
      Button('动态修改样式')
        .onClick(() => {
          // 动态更新样式
          this.modifier = new ButtonStyleModifier({
            width: '80%',
            height: 60,
            borderColor: Color.Blue,
            borderWidth: 3
          })
        })
    }
  }
}

4. 组合使用@Styles和状态变量

@Entry
@Component
struct MyComponent {
  @State buttonHeight: number = 50
  @State borderWidth: number = 2
  @State borderColor: Color = Color.Gray

  [@Styles](/user/Styles)
  get dynamicButtonStyle() {
    .width('100%')
    .height(this.buttonHeight)
    .border({ color: this.borderColor, width: this.borderWidth })
  }

  build() {
    Column() {
      Button() {
        Text('button')
      }
      .dynamicButtonStyle()
      
      Button('改变样式')
        .onClick(() => {
          this.buttonHeight = 60
          this.borderWidth = 3
          this.borderColor = Color.Red
        })
    }
  }
}

对比总结

推荐使用顺序：

1. 简单场景：优先使用@Styles
2. 需要参数：使用@Extend
3. 复杂需求：使用AttributeModifier