diff --git a/zh-cn/application-dev/reference/arkui-js/Readme-CN.md b/zh-cn/application-dev/reference/arkui-js/Readme-CN.md index 5053eff042adcc7395f1025b845e834cdec232e9..a9f0f78cdfb53c52bedc134a22ee7ec0b4fa2be1 100644 --- a/zh-cn/application-dev/reference/arkui-js/Readme-CN.md +++ b/zh-cn/application-dev/reference/arkui-js/Readme-CN.md @@ -94,6 +94,7 @@ - [animateTransform](js-components-svg-animatetransform.md) - 自定义组件 - [基本用法](js-components-custom-basic-usage.md) + - [继承样式](js-components-custom-style.md) - [自定义事件](js-components-custom-events.md) - [Props](js-components-custom-props.md) - [事件参数](js-components-custom-event-parameter.md) diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-custom-style.md b/zh-cn/application-dev/reference/arkui-js/js-components-custom-style.md new file mode 100644 index 0000000000000000000000000000000000000000..f23322cc30b191eb17e912941b7b5265ba68d4f7 --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-js/js-components-custom-style.md @@ -0,0 +1,43 @@ +# 继承样式 +> **说明:** +> 从API version 9开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 + +自定义组件具有inherit-class属性,定义如下: + +| 名称 | 类型 | 默认值 | 必填 | 描述 | +| ------------ | ------ | ------ | ---- | ------------------------------------------------------ | +| inherit-class | string | - | 否 | 从父组件继承的class样式,多个class样式之间用空格分隔。 | + +可以通过设置inherit-calss属性来继承父组件的样式。 + +父页面的hml文件,其中自定义组件comp通过inherit-class属性来指定继承其父组件的样式:parent-class1和parent-class2。 +```html + + + +
+ +
+``` + +父页面的css文件 +```html +// xxx.css +.parent-class1 { + background-color:red; + border:2px; +} +.parent-class2 { + background-color:green; + border:2px; +} +``` + +自定义组件的hml文件,其中parent-class1和parent-class2是从父组件继承的样式。 +```html + +
+ 继承父组件的样式1 + 继承父组件的样式2 +
+``` \ No newline at end of file