如何在ArkUI中通过CSS选择器修改组件的样式？

Question

各位，我在做项目时遇到一个问题，需要通过CSS选择器来修改一组组件的样式。但是，我在文档中心找了半天，还是不太清楚怎么在ArkUI中实现这个功能。有没有哪位能帮忙解答一下，最好带上代码示例哈！

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

首先，在你的.css文件中定义样式规则：

/* 定义一个类选择器 */
.my-custom-style {
  width: 100px;
  height: 100px;
  background-color: #ff0000; /* 红色背景 */
}

然后，在你的组件文件中，你可以通过class属性来引用这个样式：

@Component
struct MyComponent {
  // 组件的属性、状态等

  // 组件的渲染逻辑
  build() {
    Row() {
      Column() {
        // 应用自定义样式
        Text('这是一个有样式的文本')
          .class('my-custom-style');
      }
    }
  }
}

在这个例子中，Text组件通过.class('my-custom-style')方法引用了在CSS文件中定义的.my-custom-style类选择器。这样，Text组件就会应用这个选择器定义的样式，比如宽度、高度和背景颜色。

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。