解决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 相关文章推荐
jQuery温习篇 强大的JQuery选择器
Apr 24 Javascript
extjs中form与grid交互数据(record)的方法
Aug 29 Javascript
教你如何使用PHP输出中文JSON字符串
May 22 Javascript
再谈JavaScript线程
Jul 10 Javascript
js实现将选中内容分享到新浪或腾讯微博
Dec 16 Javascript
简单的分页代码js实现
May 17 Javascript
JQuery在循环中绑定事件的问题详解
Jun 02 Javascript
javascript代码调试之console.log 用法图文详解
Sep 30 Javascript
JavaScript交换两个变量值的七种解决方案
Dec 01 Javascript
jQuery上传插件webupload使用方法
Aug 01 jQuery
VUE基于NUXT的SSR 服务端渲染
Nov 30 Javascript
JS实现多选框的操作
Jun 24 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
Discuz Uchome ajaxpost小技巧
2011/01/04 PHP
浅析php变量作用域的一些问题
2013/08/08 PHP
ThinkPHP惯例配置文件详解
2014/07/14 PHP
Smarty变量调节器失效的解决办法
2014/08/20 PHP
Yii2数据库操作常用方法小结
2017/05/04 PHP
PHP中将一个字符串部分字符用星号*替代隐藏的实现代码
2019/09/08 PHP
javascript动态添加、修改、删除对象的属性与方法详解
2014/01/27 Javascript
js判断为空Null与字符串为空简写方法
2014/02/24 Javascript
javascript操作excel生成报表示例
2014/05/08 Javascript
window.location 对象所包含的属性
2014/10/10 Javascript
移除AngularJS下URL中的#字符的方法
2015/06/19 Javascript
最好用的Bootstrap fileinput.js文件上传组件
2016/12/12 Javascript
微信小程序 选项卡的简单实例
2017/05/24 Javascript
妙用Angularjs实现表格按指定列排序
2017/06/23 Javascript
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
2017/11/10 jQuery
ES11屡试不爽的新特性,你用上了几个
2020/10/21 Javascript
[01:12:35]Spirit vs Navi Supermajor小组赛 A组败者组第一轮 BO3 第二场 6.2
2018/06/03 DOTA
跟老齐学Python之关于循环的小伎俩
2014/10/02 Python
Python解析xml中dom元素的方法
2015/03/12 Python
python实现决策树C4.5算法详解(在ID3基础上改进)
2017/05/31 Python
Python实现定时精度可调节的定时器
2018/04/15 Python
Python中base64与xml取值结合问题
2019/12/22 Python
详解Python中namedtuple的使用
2020/04/27 Python
Html5原创俄罗斯方块(基于canvas)
2019/01/07 HTML / CSS
美国最受欢迎的度假租赁网站:VRBO
2016/08/02 全球购物
法国票务网站:Ticketmaster法国
2018/07/09 全球购物
YSL圣罗兰美妆俄罗斯官网:Yves Saint Lauret RU
2020/09/23 全球购物
南京某公司笔试题
2013/01/27 面试题
电气工程师岗位职责
2014/01/01 职场文书
一年级学生评语
2014/04/23 职场文书
群众路线教师自我剖析材料
2014/09/29 职场文书
2014年生产管理工作总结
2014/12/23 职场文书
客房领班岗位职责
2015/02/11 职场文书
2015年小学中秋节活动总结
2015/03/23 职场文书
《1942》观后感
2015/06/08 职场文书
Python实现8种常用抽样方法
2021/06/27 Python