解决vant-UI库修改样式无效的问题

 更新时间:2020-11-03 12:22:11   作者:佚名   我要评论(0)

最近用vue写页面时,发现使用vant的有些UI组件,而又不能满足自己的样式,修改CSS样式还是无效。css一般都会使用sass或者less,加了scoped后修改的样式不起作用,即

最近用vue写页面时,发现使用vant的有些UI组件,而又不能满足自己的样式,修改CSS样式还是无效。css一般都会使用sass或者less,加了scoped后修改的样式不起作用,即使加了important也没用

vue项目中,当<style>标签有scoped属性时,它的 CSS 样式只作用于当前组件中的元素,父组件的样式将不会渗透到子组件中。

解决办法:

1.对于css语法起作用

使用深度选择器,使用 >>> 操作符,将scoped样式中的选择器“深入”,即影响子组件

上述代码将会编译成:

2.对于scss,less这类的预处理器

使用 /deep/ 操作符取而代之——这是一个 >>> 的别名

代码如下:

这样修改样式就有效啦~

补充知识:vant 无法覆盖组件样式

问题描述:

在修改组件样式的时候,有些修改没有效果,在浏览器也看不到修改的内容。而 去掉 scoped 之后就会有效果。

<style lang="scss" scoped>
</style>

三种解决方式:

1、在下面加一个不带scoped的 <style> 标签处理例外情况

<style lang="scss" scoped>
</style><style lang="scss">
...
img {
  border-radius: 50%;
}
</style>

2、建一个 css 文件,用来写一些覆盖样式

3、在要覆盖的样式前加上 ::v-deep

....
 ::v-deep img {
  border-radius: 50%;
 }

以上这篇解决vant-UI库修改样式无效的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
  • vue 公共列表选择组件,引用Vant-UI的样式方式
  • 解决vue加scoped后就无法修改vant的UI组件的样式问题
  • 解决vant title-active-color与title-inactive-color不生效问题
  • 解决VantUI popup 弹窗不弹出或无蒙层的问题
  • wepy--用vantUI 实现上弹列表并选择相应的值操作
  • vue vant中picker组件的使用

相关文章

最新评论