解决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 相关文章推荐
小议Function.apply()之二------利用Apply的参数数组化来提高 JavaScript程序性能
Nov 30 Javascript
Javascript &amp; DHTML 实例编程(教程)DOM基础和基本API
Jun 02 Javascript
如何使用jQUery获取选中radio对应的值(一句代码)
Jun 03 Javascript
javascript中不等于的代码是什么怎么写
Dec 29 Javascript
jQuery mobile转换url地址及获取url中目录部分的方法
Dec 04 Javascript
总结JavaScript三种数据存储方式之间的区别
May 03 Javascript
基于JavaScript实现自定义滚动条
Jan 25 Javascript
详解JavaScript中的六种错误类型
Sep 21 Javascript
微信小程序上传图片实例
May 28 Javascript
vue router 用户登陆功能的实例代码
Apr 24 Javascript
vue使用localStorage保存登录信息 适用于移动端、PC端
May 27 Javascript
vuejs移动端实现div拖拽移动
Jul 25 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
php中通过curl检测页面是否被百度收录
2013/09/27 PHP
ThinkPHP3.1新特性之查询条件预处理简介
2014/06/19 PHP
PHP实现动态web服务器方法
2015/07/29 PHP
深入理解PHP原理之执行周期分析
2016/06/01 PHP
ext form 表单提交数据的方法小结
2008/08/08 Javascript
Javascript isArray 数组类型检测函数
2009/10/08 Javascript
jQuery学习笔记之控制页面实现代码
2012/02/27 Javascript
轻松学习Javascript闭包函数
2015/12/15 Javascript
js实现页面跳转的五种方法推荐
2016/03/10 Javascript
基于JQuery实现图片上传预览与删除操作
2016/05/24 Javascript
聊一聊JS中this的指向问题
2016/06/17 Javascript
JavaScript学习笔记整理_setTimeout的应用
2016/09/19 Javascript
js实现键盘自动打字效果
2016/12/23 Javascript
Vue数据驱动模拟实现2
2017/01/11 Javascript
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
2017/03/09 Javascript
Vue组件通信的四种方式汇总
2018/02/08 Javascript
layer.open关闭父窗口 以及调用父页面的方法
2018/08/17 Javascript
基于vue框架手写一个notify插件实现通知功能的方法
2019/03/31 Javascript
监控Nodejs的性能实例代码
2019/07/02 NodeJs
vue 实现特定条件下绑定事件
2019/11/09 Javascript
微信小程序如何实现精确的日期时间选择器
2020/01/21 Javascript
JavaScript如何使用插值实现图像渐变
2020/06/28 Javascript
解决vue字符串换行问题(绝对管用)
2020/08/06 Javascript
[07:38]2014DOTA2国际邀请赛 Newbee顺利挺进胜者组赛后专访
2014/07/15 DOTA
Python简单计算文件MD5值的方法示例
2018/04/11 Python
使用django的ORM框架按月统计近一年内的数据方法
2019/07/18 Python
Python3基本输入与输出操作实例分析
2020/02/14 Python
基于第一个PhoneGap(cordova)的应用详解
2013/05/03 HTML / CSS
德国低价购买灯具和家具网站:Style-home.de
2016/11/25 全球购物
什么是WEB控件?使用WEB控件有哪些优势?
2012/01/21 面试题
普师专业个人自荐信范文
2013/11/26 职场文书
分公司总经理岗位职责
2014/08/03 职场文书
党的群众路线教育实践活动心得体会范文
2014/11/05 职场文书
活动宣传稿范文
2015/07/23 职场文书
导游词之潮音寺
2019/09/26 职场文书
JavaScript+HTML实现学生信息管理系统
2021/04/20 Javascript