• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 继承样式
2<!--Kit: ArkUI-->
3<!--Subsystem: ArkUI-->
4<!--Owner: @seaside_wu1-->
5<!--Designer: @shiyu_huang-->
6<!--Tester: @TerryTsao-->
7<!--Adviser: @HelloCrease-->
8
9> **说明:**
10>
11> 从API version 9开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
12
13自定义组件具有inherit-class属性,定义如下:
14
15| 名称            | 类型     | 默认值  | 必填   | 描述                               |
16| ------------- | ------ | ---- | ---- | -------------------------------- |
17| inherit-class | string | -    | 否    | 从父组件继承的class样式,多个class样式之间用空格分隔。 |
18
19可以通过设置inherit-class属性来继承父组件的样式。
20
21父组件的hml文件,其中自定义组件comp通过inherit-class属性来指定继承其父组件的样式,即parent-class1和parent-class2:
22
23```html
24<!-- xxx.hml -->
25<element name='comp' src='../../common/component/comp.hml'></element>
26
27<div class="container">
28    <comp inherit-class="parent-class1 parent-class2" ></comp>
29</div>
30```
31
32父组件的css文件:
33
34```css
35/* xxx.css */
36.parent-class1 {
37    background-color:red;
38    border:2px;
39}
40.parent-class2 {
41    background-color:green;
42    border:2px;
43}
44```
45
46自定义组件的hml文件,其中parent-class1和parent-class2是从父组件继承的样式:
47
48```html
49<!--comp.hml-->
50<div class="item">
51    <text class="parent-class1">继承父组件的样式1</text>
52    <text class="parent-class2">继承父组件的样式2</text>
53</div>
54```