1# Style Inheritance
2
3> **NOTE**
4>
5> The APIs of this module are supported since API version 9. Updates will be marked with a superscript to indicate their earliest API version.
6
7A custom component has the **inherit-class** attribute, which is defined in the following table.
8
9| Name           | Type    | Default Value | Mandatory  | Description                              |
10| ------------- | ------ | ---- | ---- | -------------------------------- |
11| inherit-class | string | -    | No   | Class styles inherited from the parent component, separated by spaces.|
12
13To enable a custom component to inherit the styles of its parent component, set the **inherit-calss** attribute for the custom component.
14
15The example below is a code snippet in the HML file of the parent component that references a custom component named **comp**. This component uses the **inherit-class** attribute to inherit the styles of its parent component: **parent-class1** and **parent-class2**.
16
17```html
18<!-- xxx.hml -->
19<element name='comp' src='../../common/component/comp.hml'></element>
20
21<div class="container">
22    <comp inherit-class="parent-class1 parent-class2" ></comp>
23</div>
24```
25
26Code snippet in the CSS file of the parent component:
27
28```css
29/* xxx.css */
30.parent-class1 {
31    background-color:red;
32    border:2px;
33}
34.parent-class2 {
35    background-color:green;
36    border:2px;
37}
38```
39
40Code snippet in the HML file of the custom component, where **parent-class1** and **parent-class2** are styles inherited from the parent component:
41
42```html
43<!--comp.hml-->
44<div class="item">
45    <text class="parent-class1">Style 1 inherited from the parent component</text>
46    <text class="parent-class2">Style 2 inherited from the parent component</text>
47</div>
48```
49