看官方文档
组件对应 wxss 文件的样式,只对组件wxml内的节点生效。编写组件样式时,需要注意以下几点:
除继承样式外, app.wxss 中的样式、组件所在页面的的样式对自定义组件无效。
#a { } /* 在组件中不能使用 */
[a] { } /* 在组件中不能使用 */
button { } /* 在组件中不能使用 */
.a > .b { } /* 除非 .a 是 view 组件节点,否则不一定会生效 */
除此以外,组件可以指定它所在节点的默认样式,使用:host
选择器
<!-- 组件 custom-component.wxss -->
:host {
font-size:64rpx;
text-decoration: underline;
}
.inner-title{
font-size:48rpx;
line-height:1.8em;
}
<!-- 组件 custom-component.js -->
Component({
...
externalClasses: ['outer-title','bolded'],//可以传入多个class
...
})
<!-- 组件 custom-component.wxml -->
<custom-component>
<view class='outer-title bolded'>{{myProperty}}</view>
...
</custom-component>
<!-- 页面 index.wxml -->
<my-component my-property="{{txt}}" bindmyevent='change' outer-title ='outer' bolded ='bolder'/>
<!-- 页面 index.wxss -->
.outer{
color:orange;
text-align: center;
}
.bolder{
font-weight:bolder;
}
对于官方文档的实例,好像不生效,而且文档也介绍说:
当开放了全局样式类,存在外部样式污染组件样式的风险,请谨慎选择。
目前不深入研究,知道了解的大神留言指正
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。