[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;
}
相关推荐
小徐_23339 小时前
Wot UI 2.1.0 发布:ConfigProvider 全局配置能力升级
前端·uni-app
前端 贾公子11 小时前
小程序蓝牙打印探索与实践(上)
小程序
拙慕JULY12 小时前
小程序返回 base64 文件报错
开发语言·javascript·小程序
dh1312225052513 小时前
按月季度销售业绩核算小程序
小程序·销售小程序·绩效小程序·业绩统计小程序·业绩核算小程序
拙慕JULY13 小时前
微信小程序自定义标题背景色
微信小程序·小程序
qq_2299331314 小时前
uniapp踩坑-组件嵌套子组件不触发onReachBottom事件
uni-app
前端 贾公子15 小时前
小程序蓝牙打印探索与实践(下)
小程序·apache
00后程序员张15 小时前
Jenkins 自动上传 IPA 到 App Store 把发布步骤融入 CI/CD
android·ios·小程序·https·uni-app·iphone·webview
JackieDYH16 小时前
uniapp vue3 常用的生命周期和作用使用时机
javascript·vue.js·uni-app
PedroQue9917 小时前
uni-app路由管理神器:vue-router风格体验
前端·uni-app