在Vue中使用Vant时,遇到无法覆盖vant原样式的解决方法

最新推荐文章于 2024-07-16 17:20:09 发布
最新推荐文章于 2024-07-16 17:20:09 发布
阅读量1.1k 收藏
点赞数
分类专栏： 各种踩坑 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/M0li0809/article/details/107734871
版权

前端踩坑记录

今天发现在vue中使用vant组件
不管怎么提高权重和样式覆盖 都无法改变项目中改变组件的样式

经过搜索和尝试发现
是因为vue在编译有scoped的style标签时
会对类名添加编码从而达到专有样式的效果

解决方法就是 在组件中再添加一个style标签
因为一个vue文件中是可以有多个style组件的
在这个没有scoped的style标签中进行样式的覆盖
就可以达到覆盖vant原样式的要求

超厉害的沫璃
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vant 无法覆盖组件样式
邪人君子的博客
03-12 2985
问题描述： 在修改组件样式的时候，有些修改没有效果，在浏览器也看不到修改的内容。而 去掉 scoped 之后就会有效果。 <style lang="scss" scoped> </style> 三种解决方式： 1、在下面加一个不带scoped的 <style> 标签处理例外情况 <style lang="scss" scoped> <...
在vue中使用vant TreeSelect分类选择组件操作
01-22
//先在你需要的页面中引入，第一个是弹出层,第二个是选择的 import { Popup } from vant; import { TreeSelect } from vant; 代码部分： <van-tree-select :items=items :active-id.sync=items.activeId...
【vant】解决使用vant组件需自定义原样式时无法覆盖样式属性的问题
qq_45981245的博客
01-26 2021
问题： vant组件库调用时，会遇到<style scoped>导致覆盖默认样式无法生效的问题。
Vue无法覆盖Vant样式的问题
辞仙
08-14 1642
问题描述 开发项目的时候有用到van-collapse-item组件，底色默认白色，需求是灰色底色，加了额外的class不生效 解决方案 在class前面加上/deep/ /* 示例 */ .dym_collapse { /deep/ .van-cell { background-color: #f1f1f1; } /deep/ .van-collapse-item__content { background-color: #f1f1f1; } } 外面包一层dym_co
解决使用vant组件库，覆盖默认样式无法生效。
喝水高手
02-21 1399
问题： 使用vant组件库，<style scoped>导致覆盖默认样式无法生效。 方法一 ： 新建<style>标签，无scoped属性 <style lang="less"> .home-container { .van-nav-bar__title { max-width: unset; } </style> 方法二： 在所需样式前加::v-deep 或者/deep/ <style scoped lang=".
vue-vant样式无法覆盖/无法重写的问题，vant额外类名的使用
Delete_89x的博客
11-26 2944
项目场景： 以今天碰到的Field 输入框为例。 问题描述： 很明显，Field 输入框右边的input区域不对齐。不对齐怎么办，找到对应的样式，改样式呗。 这里就是这个左侧title，带了一个flex:1样式的问题，手动给他取消看看 这就没毛病了吧，对齐了，就是这个flex:1的问题 但是在vue里直接class改样式没生效。不论是直接给van-field加class，用!important都改不掉，然后试了试文档上的label-class左侧文本额外类名，也是不行，明明知道是哪个样式有问题，但是改
vue使用vant中的checkbox实现全选功能
01-18
本文实例为大家分享了vue使用vant中的checkbox实现全选功能的具体代码，供大家参考，具体内容如下 (item, key=index> class=listli > <p>{{ item.name
解决vue加scoped后就无法修改vant的UI组件的样式问题
11-19
然而，当我们在项目中使用`scoped`属性来实现样式隔离时，可能会遇到一个问题：无法修改UI组件的样式。`scoped`是为了避免样式冲突，使得CSS只作用于当前组件。但是，这同样意味着，当我们试图通过` scoped`的样式...
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
11-21
最近由于公司项目需要，用vue写了几个简单的页面。用到了vantUI List 列表 瀑布流滚动加载，用于控制长列表的展示 当列表即将滚动到底部时，会触发事件并加载更多列表项。 （页面加载完成后默认会自动加载一次，可以...
小程序应用两个组件，vant和echarts层级覆盖问题（canvas会覆盖这些组件）
add-oil的博客
02-22 3118
如图： 在开发者工具上是没问题的，到真机调试，手机上就会出现echarts图表覆盖在下拉列表的上方，样式混乱不堪，然后就是寻找解决办法之路 关于canvas原生组件问题 小程序中canvas属于原生组件，显示的层级非常高，不受样式中的z-index限制；页面中有fixed的内容，还有弹窗组件（比如我使用的这个vant组件），canvas会覆盖这些组件；在模拟环境不会出现这个问题，我使用的小程序开...
使用样式穿透，强制覆盖Vant原样式
a519525531的博客
12-11 4504
使用Vant组件的时候，我们会发现在某些场合组件的原样式不符合我们的需求，这个时候我们就需要重写组件的原样式。 这个是组件的原样式： 因为.w-all >>> .van-field__control{text-align: right;} 在浏览器可以看到： text-align：left那一栏已经被一条横线划掉，取而代之的是： 而这个，就是因为使用了样式穿透强制覆盖了原样式，从而实现我们需要的样式效果。 ...
Vant Weapp - 组件样式覆盖解决方案（官方方法）
王佳斌
05-17 4815
前言 对于样式覆盖，各大框架各有千秋。 本文主要介绍 vant weapp 小程序组件库的覆盖方式。 解决方案 Vant weapp 官方提供了 3 种样式覆盖方案，感兴趣的可以 查看。 每一个组件文档中，底部都会有类似 外部样式类 ，如下图所示 这个就是官方为我们提供的样式覆盖的类名， 写上样式类名，其属性为您定义的 CSS，具体使用方法如下。 <!-- 复选框组件 --> <van-checkbox custom-class="cover"> 复选框 </van
全局样式覆盖vant样式的方法
weixin_43663349的博客
10-14 1370
方法1：提高样式的层级，用!important 方法2（推荐）：在入口文件调整加载顺序，把全局样式文件写在加载vant组件库样式后面，因为层叠样式表后者会覆盖前者 // 加载vant组件库 import Vant from 'vant'; // 加载vant组件库样式 import 'vant/lib/index.css' // 加载全局样式 import "./style/index.less" ...
vantui 组件 van-field 路由切换时，字体样式混乱问题
m0_66051368的博客
08-04 552
刷新
（vant新手坑）引入Vant组件并改变其样式
热门推荐
HYeeee的博客
09-17 7万+
遇到的问题 在使用tab组件的时候，要改变tab组件上的文字颜色和滚动条的颜色。这个官网是有接口的，就是这个color。 Tabs API 参数 说明 类型 默认值 color 标签颜色 String #f44 好吧，就修改一下： &amp;lt;van-tabs v-model=&quot;active&quot; :color=&quot;'#0FAFAA'&quot; &amp;gt; ...
vite两大插件 实现按需引入vant
zxo_apple的博客
12-21 3356
之前按照vant官网推荐按需引入的方法进行配置，但是一直在报错啊！！！ vite.config.js中配置 import styleImport from 'vite-plugin-style-import' plugins: [ vue() styleImport({ libs: [ { libraryName: 'vant', esModule: true, resolveStyle: (name) =>
Vant 中的遮罩(van-overlay)不占满整个屏幕的用法
jjw_zyfx的博客
06-14 6057
效果如下： 代码如下： <template> <div class="wrapHeader"> <div class="buttonClick" @click="showMask">显示</div> <van-overlay :show="show" @click="show = false"> <ul class="ulLi"> <li&g..
vue加scoped后就无法修改vant的UI组件的样式
mossbaoo的博客
04-25 7435
有时候UI组件提供的默认的样式不能满足项目的需要，就需要我们对它的样式进行修改，但是发现加了scoped后修改的样式不起作用。 解决方法： 使用深度选择器，将scoped样式中的选择器“深入”，即影响子组件 <style scoped> .a >>> .b { /* ... */ } </style> 以上的代码会编译成： .a[data-v-f3f...
vue3【详解】单文件组件 SFC（含SFC的优点、缺点、使用场景、原理、使用预处理器、＜script setup＞语法详解、资源拆分）
最新发布
朝阳39的博客
07-16 598
自定义指令必须遵循命名规范（自定义指令名的首字母必须是v，后续跟首字母大写的自定义指令名称 ）// 在元素上做些操作 } } < template > < h1 v-my-directive > This is a Heading const。
怎么解决在vue中使用vant组件中navbar中的fixed不生效的问题
05-25
在使用 vant 组件库的 navbar 组件时，如果设置了 `fixed` 属性，但是并没有生效，可以尝试以下几种解决方法： 1. 确认是否引入了 Vant 样式文件，比如 `vant/lib/index.css` 或者 `vant/lib/index.less`。 2. 在 `vue.config.js` 中配置 `postcss-px-to-viewport` 插件，将 px 转化为 vw，从而避免出现样式失效的情况。 3. 在父组件中设置 `padding-top` 的值，保证 navbar 在顶部显示，比如： ```html <template> <div class="wrapper"> <van-nav-bar fixed title="标题"></van-nav-bar> <router-view /> </div> </template> <style scoped> .wrapper { padding-top: env(safe-area-inset-top); } </style> ``` 其中，`env(safe-area-inset-top)` 可以保证 navbar 在 iPhoneX 等刘海屏手机上不会被遮挡。 希望对你有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值