[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;
}
相关推荐
梦梦代码精12 小时前
基于UniApp+Vue3+ThinkPHP 8,这套知识付费系统的架构设计有点东西
java·低代码·docker·uni-app·开源·php
风月说与山鬼15 小时前
三、uni-app页面配置(pages.json)
前端·uni-app
mashirro18 小时前
记一次基于ruoyi-vue新增小程序服务模块,小程序登陆相关
vue.js·小程序·mybatis
风月说与山鬼20 小时前
二、uni-app入口文件(main.js)
javascript·uni-app
2601_9567436820 小时前
技术选型指南|D‑coding 小程序开发,定制能力如何转化项目服务价值
小程序·coding·开发经验
weishuangyun1231 天前
微信小程序怎么选公司?上线流程详解
大数据·小程序
show4331 天前
2026微信小程序视频转文字多语种识别引擎技术选型:22种方言25种外语挑战
微信小程序·小程序·音视频
xiaopang2 天前
一次小程序 Canvas 海报真机调试复盘:从空白导出到 iOS 保存失败
uni-app
lhldsg2 天前
县城外卖系统开发实战:从需求分析到上线全流程指南
java·小程序·需求分析
Kingexpand_com2 天前
旅游小程序怎么选型?模板与定制二次开发技术对比解析
小程序·旅游·小程序开发·旅行·定制开发