使用vant-UI库修改样式无效的几种解决方法

介绍

本文将详细讲解使用vant-UI库解决样式修改无效的几种解决方案。 文章内容质量很高，分享给大家，作为参考。 希望您看完本文后对相关知识有一个很好的了解。 有一定的知识。

最近用vue写页面的时候，发现一些使用vant的UI组件不能满足自己的风格，修改CSS样式还是无效。 CSS一般使用sass或者less，加了scope后修改的样式不起作用，即使重要也没用

在vue项目中，当< style> 标签有一个scope属性，它的CSS样式只适用于当前组件内的元素，父组件的样式不会渗透到子组件中。

1.适用于css语法

使用深度选择器，使用in操作符，范围内的选择器样式为“deep”，即影响子组件

上面的代码将编译为：

2.对于scss，像这样减少预处理器

请改用 /deep/ 运算符，它是

代码如下所示：

这样修改一下样式就可以了~

vant 无法覆盖组件样式

问题描述：

修改组件样式时，有些修改没有效果，浏览器中看不到修改的内容。 而且去掉范围之后，就会有效果。

& lt;风格lang=皊css"scoped> 　　& lt;/style>

1、添加非作用域< style> 下面的标签来处理异常

& lt;风格lang=皊css"scoped> 　　& lt;/style> & lt;风格lang=皊css"比; 　　… 　　img { 　　这个特性:50%; 　　} 　　& lt;/style>

2、创建一个css文件，写入一些覆盖样式

3、要覆盖的样式前添加::v-deep

.... 　　::v-deep img { 　　这个特性:50%; 　　}

下面介绍几种使用vant-UI库修改样式无效的解决方法。 希望以上内容能够对您有所帮助，您可以了解更多。 如果您觉得文章不错，可以分享出去，让更多的人看到。

使用vant-UI库解决无效样式修改的几种解决方案