Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
43fa8e3d
D
Docs
项目概览
OpenHarmony
/
Docs
1 年多 前同步成功
通知
159
Star
292
Fork
28
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
D
Docs
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
提交
43fa8e3d
编写于
4月 24, 2022
作者:
Y
yaoyuchi
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
修改检视意见
Signed-off-by:
N
yaoyuchi
<
yaoyuchi@huawei.com
>
上级
c992260b
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
17 addition
and
17 deletion
+17
-17
zh-cn/application-dev/reference/arkui-js/js-components-custom-style.md
...tion-dev/reference/arkui-js/js-components-custom-style.md
+17
-17
未找到文件。
zh-cn/application-dev/reference/arkui-js/js-components-custom-style.md
浏览文件 @
43fa8e3d
# 继承样式
> **说明:**
> 从
api version 9开始支持
。
> 从
API version 9开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本
。
自定义组件具有inhert-class属性,定义如下:
自定义组件具有inher
i
t-class属性,定义如下:
| 名称 | 类型 | 默认值 | 必填 | 描述 |
| ------------ | ------ | ------ | ---- | ------------------------------------------------------ |
| inhert-class | string | - | 否 | 从父组件继承的class样式,多个class样式之间用空格分隔。 |
| inher
i
t-class | string | - | 否 | 从父组件继承的class样式,多个class样式之间用空格分隔。 |
可以通过设置inhert-calss属性来继承父组件的样式。
可以通过设置inher
i
t-calss属性来继承父组件的样式。
自定义组件的hml文件,其中fatherclass1和fatherclass2是从父组件继承的样式。
```
html
<!--comp.hml-->
<div
class=
"item"
>
<text
class=
"fatherclass1"
>
继承父组件的样式1
</text>
<text
class=
"fatherclass2"
>
继承父组件的样式2
</text>
</div>
```
父页面的hml文件,其中comp自定组件通过inhert-class属性,继承了父组件的fatherclass1和fatherclass2样式。
父页面的hml文件,其中comp自定组件通过inherit-class属性,继承了父组件的parent-class1和parent-class2样式。
```
html
<!-- xxx.hml -->
<element
name=
'comp'
src=
'../../common/component/comp.hml'
></element>
<div
class=
"container"
>
<comp
inher
t-class=
"fatherclass1 father
class2"
></comp>
<comp
inher
it-class=
"parent-class1 parent-
class2"
></comp>
</div>
```
父页面的css文件
```
html
// xxx.css
.
father
class1 {
.
parent-
class1 {
background-color:red;
border:2px;
}
.
father
class2 {
.
parent-
class2 {
background-color:green;
border:2px;
}
```
自定义组件的hml文件,其中parent-class1和parent-class2是从父组件继承的样式。
```
html
<!--comp.hml-->
<div
class=
"item"
>
<text
class=
"parent-class1"
>
继承父组件的样式1
</text>
<text
class=
"parent-class2"
>
继承父组件的样式2
</text>
</div>
```
\ No newline at end of file
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录