微信小程序-自定义组件样式

一.自定义组件注意事项

1.自定义组件样式无法使用标签选择器,ID选择器,属性选择器

比如下面的设置样式的选择器就无法使用

复制代码
text{
  color:lightseagreen
} 
#content{
  color:lightseagreen
}
[id=content]{
  color:lightseagreen
}

可以使用类选择器:

复制代码
.content{
  color:lightseagreen
}

2.子选择器用于view和子组件之间,不然可能会失效

如果我们要使用子选择器设置样式:

复制代码
.content > .label{
  color:lightseagreen
}

那么父组件最好使用view组件,如下:

复制代码
<view class="content">
<text id="content" class="label">组件样式</text>
</view>

3.继承样式,color/font可以从自定义组件外继承

可以把自定义组件作为子组件,设置父组件的样式,子组件也会有相应的样式

复制代码
<view class="content">
<view>
<custom02 />
<view class="son test">son</view>
</view>
</view>

设置样式:

复制代码
.content .son.test{
  color:lightseagreen
}

4.其它情况

全局样式/page里面的样式对自定义的组件无效
可以在全局和page页面用标签选择器设置样式
组件和组件使用者使用后代选择器,可能会出现非预期情况

相关推荐
说私域5 小时前
私域整体结构的顶层设计:基于“开源AI智能名片链动2+1模式S2B2C商城小程序”的体系重构
人工智能·小程序·开源
2501_915106326 小时前
CDN 可以实现 HTTPS 吗?实战要点、部署模式与真机验证流程
网络协议·http·ios·小程序·https·uni-app·iphone
云起SAAS1 天前
SCL-90症状自评量表抖音快手微信小程序看广告流量主开源
微信小程序·小程序·ai编程·看广告变现轻·scl-90症状自评量表·scl-90
LoveEate1 天前
uniapp 运行/发版微信小程序
微信小程序·小程序·uni-app
韩立学长1 天前
【开题答辩实录分享】以《基于微信小程序的糖尿病居家健康管理系统》为例进行答辩实录分享
微信小程序·小程序
卷Java1 天前
预约记录关联查询接口说明
java·开发语言·spring boot·python·微信小程序
杏花春雨江南2 天前
小程序的页面宽度 设置多少合适??
小程序
fakaifa2 天前
【高级版】沃德政务招商系统源码+uniapp小程序
小程序·uni-app·源码下载·沃德政务招商系统·招商系统源码
云起SAAS2 天前
族谱家谱抖音快手微信小程序看广告流量主开源
微信小程序·小程序·ai编程·看广告变现轻·族谱家谱
明月(Alioo)2 天前
用AI帮忙,开发刷题小程序:微信小程序在线答题系统架构解析
微信小程序·小程序·系统架构