[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;
}
相关推荐
lhldsg3 小时前
家政派单系统开发实战:从需求分析到智能调度全流程指南
java·junit·小程序·uni-app·需求分析
小小谈电商8 小时前
2026 年 8 月|国内企业级商城源码服务商全方位测评报告
大数据·运维·小程序
PedroQue998 小时前
v2.6.0 新增全局返回守卫与 iOS 侧滑拦截,补齐跨端路由拦截能力
前端·uni-app
ZhiMuZhiLing11 小时前
企业获客软件免安装能力横评:网页端和小程序端实测数据
大数据·小程序·流量运营·用户运营
lhldsg11 小时前
课程排课系统实战指南:从数据库设计到算法调优全流程解析
java·数据库·算法·小程序
Ai-_Man12 小时前
AI办公智能体工作平台能否电脑批量导出?我们拆解了“AI导出鸭”的底层逻辑
人工智能·ai·小程序·电脑
博、、12 小时前
课程培训系统如何选型?从架构设计到答题模块的实战经验
小程序·需求分析
编程小橘子13 小时前
基于微信小程序健康心理测试、设计与实现 (源码+lw+参考文档+核心代码讲解等)
微信小程序·小程序·毕业设计·毕设
AI行业应用研究14 小时前
2026年主流报名工具测评报告:眨眼猫会务智能体报名小程序为何成为多场景首选?
java·开发语言·小程序
v1588972620114 小时前
货运搬家小程序从0到1(五):JWT 鉴权,拦截器 + ThreadLocal 用户上下文
小程序·货运小程序源码·货运小程序·搬家小程序