解决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组件的使用
您可能感兴趣的文章:
相关文章
- 最近用vue写页面时，发现使用vant的有些UI组件，而又不能满足自己的样式，修改CSS样式还是无效。css一般都会使用sass或者less，加了scoped后修改的样式不起作用，即2020-11-03
详解Python利用configparser对配置文件进行读写操作
简介 想写一个登录注册的demo，但是以前的demo数据都写在程序里面，每一关掉程序数据就没保存住。。 于是想着写到配置文件里好了 Python自身提供了一个Module -2020-11-03- 一、分析网页 网站的页面是 JavaScript 渲染而成的，我们所看到的内容都是网页加载后又执行了JavaScript代码之后才呈现出来的，因此这些数据并不存在于原始 HTML 代2020-11-03
- 1、使用脚手架搭建一个vue项目 2、运行，在本地运行没问题，接着打包上服务器，遇到404的错误，如下 这是webpack打包的结果，解决办法如下 1、修改build文件夹下的2020-11-03
- Python自动的os库是和操作系统交互的库，常用的操作包括文件/目录操作，路径操作，环境变量操作和执行系统命令等。 文件/目录操作 获取当前目录(pwd): os.getcwd2020-11-03
- 需求背景 业务表tb_image部分数据如下所示，其中id唯一，image_no不唯一。image_no表示每个文件的编号，每个文件在业务系统中会生成若干个文件，每个文件的唯一ID就2020-11-03
关于idea更新到2020.2.3无法创建web项目原因 library is not specified
推荐 IntelliJ IDEA 2020.2.3永久破解激活教程(亲测有效) 正文开始 今天将idea更新到了最新版2020.2.3，结果发现新建java project或者model时找不到原来的那些可选勾2020-10-29- 在开发Web应用程序中，文件上传是经常用到的一个功能。 在Jquery时代，做上传功能，一般找jQuery插件就够了，很少有人去探究上传文件插件到底是怎么做的。 简单2020-10-29
PyCharm2019.3永久激活破解详细图文教程，亲测可用（不定期更新）
PyCharm是一种Python IDE，带有一整套可以帮助用户在使用Python语言开发时提高其效率的工具，比如调试、语法高亮、Project管理、代码跳转、智能提示、自动完成、单元2020-10-29Docker自动化构建Automated Build实现过程图解
自动化构建，就是使用Docker Hub连接一个包含Dockerfile文件的GitHub仓库或者BitBucket仓库，Docker Hub则会自动构建镜像，通过这种方式构建出来的镜像会被标记为Au2020-10-29
最新评论