微信小程序 自定义组件样式
原创
看官方文档
组件样式
组件对应 wxss 文件的样式，只对组件wxml内的节点生效。编写组件样式时，需要注意以下几点：
- 组件和引用组件的页面不能使用id选择器（#a）、属性选择器（[a]）和标签名选择器，请改用class选择器。
- 组件和引用组件的页面中使用后代选择器（.a .b）在一些极端情况下会有非预期的表现，如遇，请避免使用。
- 子元素选择器（.a>.b）只能用于 view 组件与其子节点之间，用于其他组件可能导致非预期的情况。
- 继承样式，如 font 、 color ，会从组件外继承到组件内。
除继承样式外， 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;
}
使用外部样式，例如index页面引用 组件，使用index.wxss中的某些样式
<!-- 组件 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 删除。
评论
登录后参与评论
推荐阅读
目录