[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;
}
相关推荐
程xu袁1 小时前
只有一段副歌,AI写歌选小程序、Suno还是海绵音乐?
小程序·suno·ai音乐·ai音乐工具·ai生成音乐·ai写歌工具
专业程序开发源10 小时前
springboot生命故事书制作小程序65290-计算机课程设计、毕业设计
java·vue.js·spring boot·后端·mysql·小程序·课程设计
QQ_216962909610 小时前
基于微信小程序的智能膳食分析系统
java·大数据·spring boot·微信小程序·小程序·旅游
遗憾随她而去.1 天前
uniApp跨端开发: 解决不同平台显示差异问题
uni-app
扶风ff1 天前
求职笔试资料太散?用练题簿在线刷题,按岗位整理练习清单
前端·学习·小程序
Ai-_Man1 天前
请问豆包的智能体聊天记录该怎么弄
开发语言·前端·javascript·人工智能·小程序·ecmascript·电脑
Ai-_Man2 天前
您您这可以把Dola的多个会话比如说。左侧的多个会话一次性导出吗?不是单条会话里面的多次会对话。用AI导出鸭,答案是可以的
开发语言·前端·人工智能·小程序
2601_949950632 天前
练题簿小程序的 4 个功能,把学习资料变成题库
人工智能·小程序·刷题·练习·小程序推荐
Mingprime2 天前
短时冲刺,孤军奋战,压力山大
小程序
Mingprime2 天前
孤军奋战那一次
小程序