[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;
}
相关推荐
AI_AGENT_DEV_AI5 小时前
原生 APP 开发的开发优点
uni-app
不吃辣4909 小时前
vibe coding | 如何做一个AI制图小程序?
人工智能·小程序·ai编程
laboratory agent开发9 小时前
2026小程序服务商推荐:全域私域数字化工具选型深度解析
小程序
小码哥06815 小时前
智慧物业管理系统开发详解:核心功能与源码开发优势
小程序·物业管理·物业系统
汤姆yu15 小时前
基于微信小程序的方言转文字小程序的设计与实现
java·小程序·毕业设计·方言翻译
不吃辣49016 小时前
vibe coding | 如何做一个 AI 闹钟小程序?
人工智能·小程序·ai编程
万岳科技程序员小金17 小时前
在线教育系统源码开发全解析:教育培训APP、小程序及平台搭建完整方案
小程序·在线教育系统源码·教育app开发·教育小程序开发
JackieDYH18 小时前
uniapp-通知滚动组件+轮播图组件封装-案例
uni-app·轮播图·通知
2501_915921431 天前
appuploader-cli 命令行上传 IPA 到 App Store Connect upload CI 集成
android·ci/cd·小程序·https·uni-app·iphone·webview
梦想的旅途22 天前
企业微信销售自动化:线索分配与超时预警
小程序·自动化·企业微信