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```