[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;
}
相关推荐
CRMEB11 小时前
不懂设计也能有精美商城?CRMEB 主题广场与可视化装修的“千店千面“实操
人工智能·ai·小程序·开源·php
维双云14 小时前
2026微信小程序开店用哪个平台?长期稳定运营的系统选择方法
微信小程序·小程序
Ai-_Man14 小时前
我是想导出豆包智能体的聊天记录,能分开用户和智能体对话吗?记录有点太多了
人工智能·ai·小程序
lhldsg14 小时前
家校托管互通系统开发实战:从需求分析到部署全指南
小程序·uni-app·需求分析
lhldsg15 小时前
家校托管互通系统技术架构与实战设计
java·经验分享·小程序·架构
疯狂小猫咪15 小时前
SaaS vs 定制开发:教培机构技术选型的成本、风险与适用场景深度对比
小程序
www_aiyuanma_vip16 小时前
非遗传承小程序
小程序
lhldsg17 小时前
线上住宿预约系统开发实战:从需求分析到接口设计
java·大数据·小程序·需求分析
mykj155118 小时前
一个小程序从想法到上线,需要经历哪些步骤
小程序·app开发·小程序开发
Coodor18 小时前
使用web也可以写NFC微信小程序拉取
前端·微信小程序·小程序·nfc拉起小程序