HarmonyOS鸿蒙Next中@Styles和@Extend封装的全局样式怎么在其他文件使用呀?

HarmonyOS鸿蒙Next中@Styles和@Extend封装的全局样式怎么在其他文件使用呀? 我们在做开发的时候，希望能封装出一种全局样式，然后在所有文件里使用，这样就不需要每个页面单独写样式代码了。

这个功能挺重要的，应该挺多人请问有大神知道应该如何实现吗？

5 回复

不支持

更多关于HarmonyOS鸿蒙Next中@Styles和@Extend封装的全局样式怎么在其他文件使用呀?的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


目前官方有提到@Styles和@Extend封装的全局样式为本页面调用，脱离本页面无法调用。

利用attributeModifier可以实现跨页面抽离样式

参考：https://developer.huawei.com/consumer/cn/forum/topic/0208152276444625528?fid=0109140870620153026

目前好像还不支持，

在HarmonyOS鸿蒙Next中，使用@Styles和@Extend封装的全局样式可以通过以下步骤在其他文件中使用：

  1. 定义全局样式：在一个文件中使用@Styles或@Extend定义样式。
// styles.ets
@Styles function globalStyle() {
  .width(100)
  .height(100)
}
  1. 导入样式文件：在需要使用样式的文件中导入定义样式的文件。
// main.ets
import { globalStyle } from './styles';
  1. 应用样式：在组件中直接应用导入的样式。
// main.ets
@Entry
@Component
struct MyComponent {
  build() {
    Column() {
      Text('Hello World')
        .globalStyle()
    }
  }
}

通过这种方式，你可以在多个文件中复用全局样式。

回到顶部