silence_more
silence_more
  • 发布:2020-08-14 09:35
  • 更新:2023-09-19 16:00
  • 阅读:12928

uniapp使用/deep/修改组件样式在H5生效,小程序无效怎么解决?

分类:uni-app

使用uniapp内置的swiper组件,我想修改样式,结果在调用组件的页面使用/deep/修改组件样式,代码如下:
/deep/ uni-swiper .uni-swiper-dot-active {
background-color: $public-color;
}
style上是加了scoped的。
在H5上没有问题,样式调整了,但是在小程序上,没有任何效果,还尝试了加important,外层单独写个class覆盖,都只在H5生效,小程序没有任何作用,这到底要怎么写才有用。总不能去component里面改源码,那要是我别的页面还要用这个组件,但是样式和这里又不一样,不就用不成了啊。求解。

2020-08-14 09:35 负责人:无 分享
已邀请:
1***@qq.com

1***@qq.com

不是楼上说的 important 的问题。

  • 页面中可以使用 deep 修改组件(自定义组件或内置组件)样式,成功与否看css样式权重,不一定需要 !important;
  • 但是在自定义组件中使用 deep 修改样式将不会生效,使用 !important 也无济于事。
  • 解决方法楼上已经有答案了,deep 规则不要放在自定义组件中,移到全局样式就可以。其实移动到自定义组件所在页面也就够了
  • 但是都要小心处理全局样式污染。比如可以给要修改样式的内置组件赋予一个全局唯一的类名。
  • laravuel

    哎,没办法,只能这样了,这设计太曹丹了。。 。


    2022-10-22 09:07

  • lalalacp3

    确实是的,::v-deep写在页面最上层修复了


    2022-12-05 09:14

DCloud_UNI_GSQ

DCloud_UNI_GSQ

你要修改的不是自己的组件吧,是要修改小程序内置组件?

  • silence_more (作者)

    内置的swiper组件,后面去插件市场引入了一个组件也是一样的改不了。


    2020-08-17 11:37

  • DCloud_UNI_GSQ

    回复 silence_more: 小程序的内置组件样式不推荐修改,虽然网上有一些hack的微信小程序修复方式,但并不能兼容其他的小程序,且由于是非公开的接口,内部实现细节更改后很可能导致失效


    2020-08-17 14:23

  • silence_more (作者)

    回复 DCloud_UNI_GSQ: 在插件市场另外找的组件使用/deep/一样的只有H5生效,小程序也是不行啊


    2020-08-17 14:28

  • DCloud_UNI_GSQ

    回复 silence_more: 注意一下是否样式权重问题


    2020-08-18 11:24

紫川丶

紫川丶

小程序不支持deep吧?

  • silence_more (作者)

    那有没有什么办法可以解决呢


    2020-08-17 11:38

杜昂要开心

杜昂要开心

同问,/deep/ 编译成H5起作用,编译成小程序不起作用。目前采用全局样式控制

9***@qq.com

9***@qq.com

我也遇到这个问题,uniapp自定义组件里面使用/deep/去修改uview组件的样式,H5成功,微信小程序不生效,求解?

  • 星期天

    你好,请问解决了吗


    2023-05-08 22:18

清风养马

清风养马

你可以在swiper标签上加个class,然后就不需要用/deep/了

冷月i

冷月i

使用!important就可以解决

  • 8***@qq.com

    的确如此,后面的同学可以参考一下,例如: ::v-deep .uni-forms-item__inner {

    padding: 0 !important;

    }


    2022-05-10 17:26

2***@qq.com

2***@qq.com - 我是一个兵

如需粘贴代码,必须将代码包裹在 mar******

小王瘦瘦

小王瘦瘦

::v-deep 不能嵌套在选择器里面 也就是说::v-deep 只能放到最外层 然后::v-deep后面接最底层也就是需要修改样式的选择器

要回复问题请先登录注册