用vant-UI库修改样式无效怎么办，怎样解决-群英

上一篇：用Vue框架怎样写一个简单的上班日历下一篇：vant中toast层级改变怎样实现，方法是什么

在实际应用中，我们有时候会遇到“用vant-UI库修改样式无效怎么办，怎样解决”这样的问题，我们该怎样来处理呢？下文给大家介绍了解决方法，希望这篇“用vant-UI库修改样式无效怎么办，怎样解决”文章能帮助大家解决问题。

最近用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库修改样式无效怎么办，怎样解决”的文章就介绍到这了,更多相关的内容，欢迎关注群英网络，小编将为大家输出更多高质量的实用文章！

标签：修改样式无效

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

上一篇：用Vue框架怎样写一个简单的上班日历下一篇：vant中toast层级改变怎样实现，方法是什么