解决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 相关文章推荐
js cookies 常见网页木马挂马代码 24小时只加载一次
Apr 13 Javascript
Google Map API更新实现用户自定义标注坐标
Jul 29 Javascript
javascript权威指南 学习笔记之javascript数据类型
Sep 24 Javascript
javascript之typeof、instanceof操作符使用探讨
May 19 Javascript
jquery网页回到顶部效果(图标渐隐,自写)
Jun 16 Javascript
关于获取DIV内部内容报错的原因分析及解决办法
Jan 29 Javascript
angularjs点击图片放大实现上传图片预览
Feb 24 Javascript
JavaScript实现的浏览器下载文件的方法
Aug 09 Javascript
浅谈angular.js跨域post解决方案
Aug 30 Javascript
vue-loader中引入模板预处理器的实现
Sep 04 Javascript
json字符串对象转换代码实例
Sep 28 Javascript
jQuery实现滑动星星评分效果(每日分享)
Nov 13 jQuery
解决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
使用PHP会话(Session)实现用户登陆功能
2013/06/29 PHP
解析array splice的移除数组中指定键的值,返回一个新的数组
2013/07/02 PHP
分享一段php获取linux服务器状态的代码
2014/05/27 PHP
讲解WordPress中用于获取评论模板和搜索表单的PHP函数
2015/12/28 PHP
php时间函数用法分析
2016/05/28 PHP
php精度计算的问题解析
2019/06/21 PHP
关于恒等于(===)和非恒等于(!==)
2007/08/20 Javascript
模仿jQuery each函数的链式调用
2009/07/22 Javascript
ajax java 实现自动完成功能
2012/12/19 Javascript
jQuery 中$(this).index与$.each的使用指南
2014/11/20 Javascript
8 行 Node.js 代码实现代理服务器
2016/12/05 Javascript
jQuery弹出窗口简单实现代码
2017/03/09 Javascript
vue.js指令v-model使用方法
2017/03/20 Javascript
Vue关于数据绑定出错解决办法
2017/05/15 Javascript
JS基于正则实现数字千分位用逗号分隔的方法
2017/06/16 Javascript
Swiper实现轮播图效果
2017/07/03 Javascript
JavaScript中in和hasOwnProperty区别详解
2017/08/04 Javascript
nodejs实现爬取网站图片功能
2017/12/14 NodeJs
ES6箭头函数和扩展实例分析
2020/05/23 Javascript
代码讲解Python对Windows服务进行监控
2018/02/11 Python
python try except 捕获所有异常的实例
2018/10/18 Python
在Python中调用Ping命令,批量IP的方法
2019/01/26 Python
详解Django项目中模板标签及模板的继承与引用(网站中快速布置广告)
2019/03/27 Python
opencv 获取rtsp流媒体视频的实现方法
2019/08/23 Python
Python logging设置和logger解析
2019/08/28 Python
Python字符串大小写转换拼接删除空白
2019/09/19 Python
python字符串下标与切片及使用方法
2020/02/13 Python
Django框架配置mysql数据库实现过程
2020/04/22 Python
浅谈Python中的模块
2020/06/10 Python
python asyncio 协程库的使用
2021/01/21 Python
ZWILLING双立人法国网上商店:德国刀具锅具厨具品牌
2019/08/28 全球购物
高一英语教学反思
2014/01/22 职场文书
学历公证委托书
2014/04/09 职场文书
旷课检讨书500字
2014/10/14 职场文书
教师自查自纠工作情况报告
2014/10/29 职场文书
考试没考好检讨书(精选篇)
2014/11/16 职场文书