HarmonyOS 如何实现通用样式？

Question

一、能否像前端添加class一样，一个通用css样式（分全局和组件内两种情况），供多个组件使用,参考：

.normal-font{
  font-size: 16px;
  text-align: center;
  color: #36363A;
  margin: 0 auto 10px;
}

<div class="class1 normal-font">666</div>
  <div class="class2 normal-font">123</div>
  <div class="class3 normal-font">678</div>

二、能否直接把某些样式给到包裹层，比如字体字号颜色之类，目前容器组件是不能添加字体字号样式的，但是容器内的基础组件使用的又是相同的样式，这样代码很冗余以下text组件的样式每次都要写一遍一样的

Row(){
  Row(){
    Text('文案1')
      .fontColor($r('app.color.black_36'))
      .fontSize(15)
    ......//其他组件
  }
  Row(){
    Text('文案2')
      .fontColor($r('app.color.black_36'))
      .fontSize(15)
    ......//其他组件
  }
  Row(){
    Text('文案3')
      .fontColor($r('app.color.black_36'))
      .fontSize(15)
    ......//其他组件
  }

}
.fontSize(15) //报错：Property 'fontColor' does not exist on type 'RowAttribute'. <ArkTSCheck>

Answer 1

一、能否像前端添加class一样，一个通用css样式（分全局和组件内两种情况），供多个组件使用–使用@Styles装饰器可以将多条样式设置提炼成一个方法，直接在组件声明的位置调用。通过@Styles装饰器可以快速定义并复用自定义样式。注意：当前@Styles仅支持通用属性和通用事件。

参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-style-V5

二、能否直接把某些样式给到包裹层–由于fontSize不是通用样式，所以没法写在容器组件上。当前的方法是在@Styles的基础上，我们提供了@Extend，用于扩展原生组件样式。通过@Extend组合样式，可以使得代码更加简洁，增强可读性。

参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-extend-V5\#使用场景