[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;
}
相关推荐
JavaDog程序狗16 小时前
【指南】uni-app微信小程序多环境CI-CD完全指南
ci/cd·uni-app·jenkins
PedroQue9916 小时前
uni-router v2.1.0 升级:导航守卫全面支持返回值模式
前端·uni-app
weixin_BYSJ198717 小时前
springboot技能与工具共享小程序---附源码29657
java·javascript·spring boot·python·小程序·django·php
weixin_BYSJ198717 小时前
flask民族服饰饰品商城小程序---附源码37399
java·javascript·spring boot·python·小程序·django·php
show43318 小时前
2026小程序工具生态技术趋势:轻量化免费替代桌面软件的路径解析
小程序
ON.LIN1 天前
云边去水印小程序详细搭建教程(附源码)
小程序
2501_915909062 天前
iOS test 测试怎么做?功能、性能、兼容、稳定与安全五类测试指南
android·ios·小程序·https·uni-app·iphone·webview
deng1hao2 天前
2026小微企业企业邮箱选择指南:低成本高性价比方案
网络·科技·小程序
Ai-_Man2 天前
从AI公式到可编辑文档:MathType格式转换技术分析教程
人工智能·ai·小程序
show4332 天前
2026视频处理小程序技术选型指南:链接解析+OCR+ASR+AI配音多引擎对比
小程序·ocr·音视频