[uniapp/wx小程序] 给自定义组件或ui组件加样式在wx小程序不生效

原因:

不论是自定义组件还是ui组件,本质上都是因为微信小程序的**组件隔离策略**造成的

另外,组件内不能使用id选择器

官方说明:

组件和引用组件的页面不能使用id选择器(#a)、属性选择器([a])和标签名选择器,请改用class选择器。

复制代码
#a { } /* 在组件中不能使用 */
[a] { } /* 在组件中不能使用 */
button { } /* 在组件中不能使用 */
.a > .b { } /* 除非 .a 是 view 组件节点,否则不一定会生效 */

几种解决方法参考:

1.首先检查选择器的问题,组件内不能使用id选择器
2.解除样式隔离

和data/methods同级,增加该配置,这样父级的样式就可以穿透到子组件

复制代码
options: {
    styleIsolation: 'shared', // 解除样式隔离
}
3.使用 ::v-deep
css 复制代码
::v-deep .xxx{
    width:100px;
}
相关推荐
weixin_4935036712 小时前
商会小程序附件上传:分片上传 + OSS 直传完整实现(Vue3 + 阿里云 OSS 实战)
阿里云·小程序·云计算
优度网13 小时前
微信小程序主体变更公证书线上办理流程与业务交接风险规避方法浅析(2026)
小程序
m0_5873830015 小时前
外卖CPS系统开发实战:从架构设计到运营落地全指南
java·spring·小程序·架构·需求分析
梦曦i17 小时前
uni-router v0.2.0重磅发布:全链路拦截+重复导航优化
前端·uni-app
EatFan17 小时前
【实战经验】uni-app使用 SSE 踩坑,EventSource不支持怎么办?
android·后端·ios·uni-app
T01156181 天前
全栈项目实战手记|艺培场馆课时预约小程序 PC 管理端 Demo 完整开发成果展示
小程序
凡泰AI1 天前
如何为政务 APP 搭建开放平台,实现多部门、第三方供应商标准化入驻与统一管理
android·大数据·小程序·uni-app·app·政务
FX1317887KP_1 天前
AI陪练正在重塑KET PET FCE口语备考,传统外教课还有必要吗?
人工智能·小程序·ket口语·pet口语·fce备考·剑桥英语
lhldsg1 天前
从零构建智慧场馆解决方案小程序:开发全流程实战
java·前端·小程序
vx-Biye_Design1 天前
SSM伴侣动物伴护星小程序06330-计算机课程设计、毕业设计
spring boot·后端·elasticsearch·小程序·架构·课程设计·idea