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


Posted in Javascript onNovember 03, 2020

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

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

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

解决办法:

1.对于css语法起作用

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

上述代码将会编译成:

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

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

代码如下:

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

这样修改样式就有效啦~

补充知识: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库修改样式无效的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
document.documentElement &amp;&amp; document.documentElement.scrollTop
Dec 01 Javascript
javascript时间自动刷新实现原理与步骤
Jan 06 Javascript
解析Javascript中中括号“[]”的多义性
Dec 03 Javascript
jQuery过滤选择器:not()方法使用介绍
Apr 20 Javascript
js实现网页图片延时加载 提升网页打开速度
Jan 26 Javascript
微信小程序开发探究
Dec 27 Javascript
原生js实现轮播图
Feb 27 Javascript
vue获取input输入值的问题解决办法
Oct 17 Javascript
《javascript少儿编程》location术语总结
May 27 Javascript
JQuery Ajax动态加载Table数据的实例讲解
Aug 09 jQuery
在Web关闭页面时发送Ajax请求的实现方法
Mar 07 Javascript
JavaScript实现tab栏切换效果
Mar 16 Javascript
解决vant title-active-color与title-inactive-color不生效问题
Nov 03 #Javascript
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
Nov 03 #Javascript
JavaScript语法约定和程序调试原理解析
Nov 03 #Javascript
解决vux 中popup 组件Mask 遮罩在最上层的问题
Nov 03 #Javascript
React Native登录之指纹登录篇的示例代码
Nov 03 #Javascript
解决VantUI popup 弹窗不弹出或无蒙层的问题
Nov 03 #Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
Nov 03 #Javascript
You might like
「OVERLORD」动画重要删减!雅儿贝德的背叛?至尊猎杀队结成
2020/04/09 日漫
德生BCL3000的电路分析和打磨
2021/03/02 无线电
php笔记之:初探PHPcms模块开发介绍
2013/04/26 PHP
PHP获取php,mysql,apche的版本信息示例代码
2014/01/16 PHP
php实现天干地支计算器示例
2014/03/14 PHP
PHP FATAL ERROR: CALL TO UNDEFINED FUNCTION BCMUL()解决办法
2014/05/04 PHP
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
2013/11/22 Javascript
Express.JS使用详解
2014/07/17 Javascript
jQuery判断checkbox是否选中的3种方法
2014/08/12 Javascript
使用AngularJS 应用访问 Android 手机的图片库
2015/03/24 Javascript
JavaScript编程中的Promise使用大全
2015/07/28 Javascript
Winform客户端向web地址传参接收参数的方法
2016/05/17 Javascript
第一次接触神奇的Bootstrap菜单和导航
2016/08/01 Javascript
jQuery UI Draggable + Sortable 结合使用(实例讲解)
2017/09/07 jQuery
layer弹出子iframe层父子页面传值的实现方法
2018/11/22 Javascript
nodejs脚本centos开机启动实操方法
2020/03/04 NodeJs
微信小程序实现可长按移动控件
2020/11/01 Javascript
[01:34]2014DOTA2 TI预选赛预选赛 选手比赛房大揭秘!
2014/05/20 DOTA
Python入门_浅谈for循环、while循环
2017/05/16 Python
Python tkinter实现的图片移动碰撞动画效果【附源码下载】
2018/01/04 Python
django 发送手机验证码的示例代码
2018/04/25 Python
python实现扫描ip地址的小程序
2019/04/16 Python
使用python远程操作linux过程解析
2019/12/04 Python
pytorch使用 to 进行类型转换方式
2020/01/08 Python
基于django micro搭建网站实现加水印功能
2020/05/22 Python
keras中epoch,batch,loss,val_loss用法说明
2020/07/02 Python
Django实现微信小程序支付的示例代码
2020/09/03 Python
Canvas多边形绘制的实现方法
2019/08/05 HTML / CSS
澳大利亚儿童和婴儿产品在线商店:Lime Tree Kids
2017/10/05 全球购物
加拿大时装零售商:Influence U
2018/12/22 全球购物
料理师求职信
2014/01/30 职场文书
2014年中学生检讨书大全
2014/10/09 职场文书
投标文件签署授权委托书范本
2014/10/12 职场文书
积极心理学课程心得体会
2016/01/22 职场文书
话题作文之成长
2019/12/09 职场文书
CSS极坐标的实例代码
2021/06/03 HTML / CSS