[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;
}
相关推荐
黑马程序员毕设11 小时前
基于Java的医院药品管理系统的优化设计与实现
java·开发语言·spring boot·小程序·架构·课程设计·毕设
我爱写代码i13 小时前
AI对话绘画数字人源码 - uniapp前端
前端·人工智能·uni-app
ModyQyW14 小时前
vite-plugin-uni-pages 更新了什么
前端·uni-app
数字游民952716 小时前
史诗级更新:微信小程序支持个人主体接入虚拟支付
ai·微信小程序·小程序·opc·数字游民9527
smartpi_ai16 小时前
语音模块与主控 MCU 串口对接实战:协议设计六要点,联调少走一半弯路
人工智能·小程序·语音识别
禾高网络17 小时前
养老系统开发:背景、架构与养老行业展望
java·大数据·人工智能·小程序·架构
lhldsg20 小时前
相册印刷实战指南:从设计规范到系统落地全流程解析
java·小程序·架构·设计规范
汤姆yu20 小时前
基于微信小程序的晚托机构管理系统
微信小程序·小程序·晚托
博、、20 小时前
酒馆预约系统开发实战:从需求分析到上线部署指南
小程序·需求分析
zww894911121 小时前
相册印刷项目实战指南:从设计到成品的完整技术流程
java·小程序·eclipse