HarmonyOS 鸿蒙Next 有支持stateStyles且可以自定义子组件的组件吗 checkbox 好像不支持

[@Entry](/user/Entry)
[@Component](/user/Component)
struct CheckBoxPage {
  [@State](/user/State) bgc: string = '#ff44bf8a'
  [@State](/user/State) select: boolean = true

  build() {
    Column() {

      Flex({ justifyContent: FlexAlign.SpaceBetween }) {
        Stack() {
          Row() {
            Image($r('app.media.startIcon'))
              .width(40)
              .height(40)
            Text('支付宝')
          }
          .padding(5)
          .border({ width: 1, color: !this.select ? '#ffd1a8e5' : '#ffc4cac7' })
          .backgroundColor(!this.select ? '#ffba94cd' : '#ffc4cac7')
          .justifyContent(FlexAlign.Center)
          .width(150)
          .borderRadius(5)

          if (!this.select) {
            Polygon({ width: 20, height: 20 })
              .points([[10, 10], [15, 0], [20, 10]])
              .fill('#ffc9acd7')
              .position({ top: -10, left: 10 })
          }

        }
        .onClick(() => {
          this.select = !this.select
        })

        Stack() {
          Row() {
            Image($r('app.media.startIcon'))
              .width(40)
              .height(40)
            Text('微信')
          }
          .padding(5)
          .border({ width: 1, color: this.select ? '#ffd1a8e5' : '#ffc4cac7' })
          .backgroundColor(this.select ? '#ffba94cd' : '#ffc4cac7')
          .justifyContent(FlexAlign.Center)
          .width(150)
          .borderRadius(5)

          if (this.select) {
            Polygon({ width: 20, height: 20 })
              .points([[10, 10], [15, 0], [20, 10]])
              .fill('#ffc9acd7')
              .position({ top: -10, left: 10 })
          }

        }
        .onClick(() => {
          this.select = !this.select
        })
      }
      .padding(10)

      .height(100)

      .width('100%')
    }
  }
}