vant组件样式通过类名修改无效问题

最新推荐文章于 2023-11-10 10:26:21 发布
最新推荐文章于 2023-11-10 10:26:21 发布
阅读量1.2k 收藏
点赞数 2
文章标签： 前端 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_69301850/article/details/125563528
版权

        这里不说解决方案，记录下自己的粗心，如果你也跟我一样网上到处搜索类名修改vant组件无效的解决方案，大概率会搜到让你用deep穿透，去掉scope，导入css文件等方法。

          在做这些之前，建议还是先去检查一下自己的less文件，你要修改的那个类是否放入正确的层级，层级不对加!important 都没用，如果真是这个原因，不要灰心，你只是用的比较少而已，才没有意识到这个问题，多用用就好了！

顽强d石头
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vant-weapp 有赞小程序外部样式custom-class使用方式
Z_PTOPONE的博客
04-17 5829
如图所示，每个组件都有很多的外部样式类，那么这些外部样式类是如何使用的？官方也没个具体说法，百度也找不到具体的讲解，这让一个后端程序员看着非常的头疼，不过还好，经过的不断的尝试与摸索，终于找到了如何正确使用这些外部样式类的方法。 以custom-class举个例子，比如我现在要修改van-col的样式，我可以这样： <van-col span="8" custom-class="desc_info">任务说明</van-col> 然后在wxss文件中使用: .desc_info即.
小程序页面嵌套自定义组件无法修改vant-weapp样式的问题
github_54195343的博客
09-30 2525
嵌套在页面中的自定义组件使用了vant，如果想修改嵌套在深层的vant样式，不能在组件内修改，而要到父页面中去修改
解决使用vant库 样式修改不了问题
m0_65544665的博客
12-06 2005
解决使用vant库 样式修改不了问题
vant折叠面板collapse控件不生效
liyanxu92的博客
06-16 2682
v-model关键字写错导致vant折叠面板collapse控件不生效
深度选择器/deep/,关于elementui样式修改不了的问题完美解决
qq_52347540的博客
04-11 4901
深度选择器/deep/ 在vue-elementui写项目时，时常elementui的效果不理想，但是又没办法直接修改elementui的样式 因为我们无法通过普通的选择器获取到我们要更改的标签【elementui自己加了一层】, 通常的解决办法是在全局css中，寻找到我们要更改标签的class【elementui自定义的class】,但是这样的话，会影响到所有对应的标签，例如：我更改了el-input__inner的字体颜色,那么所有使用到的el-input颜色都会对应改变，这显然是不合理的 在此引出
小菜鸟的微信小程序 - 云开发 - 账号密码库（2）vant-weapp 组件样式修改
头发浓密的萌新的博客
08-19 1193
主要根据 Collapse 折叠面板 组件来讲解如何改变 vant-weapp 组件库里的组件样式
解决vue加scoped后就无法修改vant的UI组件的样式问题
10-14
在Vue项目中，当我们使用`scoped`属性来限制样式只作用于当前组件时，可能会遇到一个问题，即无法修改引入的第三方UI库，如Vant的组件样式。这是因为`scoped`的作用范围仅限于当前组件，不会影响其子组件。Vant的...
浅谈vant组件Picker 选择器选单选问题
01-18
补充知识：vue使用vant编辑用户性别 我就废话不多说了，大家还是直接看代码吧~ 性别 value=user.gender click=isEditGenderShow> <!-- 编辑用户性别 --> <van-action-sheet v-model=isEditGenderShow :...
vant组件小程序版 适用小程序
09-01
Vant组件库是专门为移动端开发设计的一套UI框架，它源于滴滴出行的开源项目，旨在提供轻量、易用且高度可定制的组件，适用于快速构建高质量的移动应用。在小程序开发领域，Vant WeApp是Vant组件库的一个版本，专为...
详解如何搭建mpvue框架搭配vant组件库的小程序项目
01-03
Vant – 轻量、可靠的移动端 Vue 小程序 组件库。由 有赞 公司开发与维护。提供了一系列美观、优质的移动端组件。vant 官网 2. 在普通小程序怎么使用 vant 组件 使用之前 使用 Vant Weapp 前，请确保你已经学习过...
小程序 动态样式绑定
andy_dada的博客
07-12 220
<van-col custom-class="text_ellipsis fs28 c333 {{item.stud === 1 ? 'c27c' :''}} {{item.stud === 2 ? 'c726':''}} {{item.stud === 3 ? 'c999':''}}" class="fs28 tar c27c w50p ">{{item.stud}}</van-col>
Vue3+vant的Toast组件样式失效问题
最新发布
wangyalong4的博客
11-10 790
在移动端项目中使用toast组件发现不生效，给vue.config.js(ts)中VantResolver配置importStyle属性解决。然后在main.js(ts)中引入vant样式，就可以使用该组件了。
Vant组件样式没有生效
Ljm_的博客
12-28 6268
昨天在学习Vant组件库的时候遇到一个问题； 我在main.js中引入了vant，也注册到了Vue中； 因为我使用的是自动按需导入, 那么就要配置babel.config.js, 如图; 但是在运行的时候vant的样式却没有生效, 相当于写了HTML+CSS, 但是CSS却没生效； 在网上查阅了相关资料，有人说要在main.js写上import 'vant/lib/index.css', 但是我写上之后还是没有生效，于是在vant的文档里看了下，这是另一种导入的方法，而且也确实没有生效，那么与...
element ui dialog custom-class不生效最终解决办法
南北极之间
04-11 5860
element ui dialog custom-class不生效最终解决办法
element-plus dialog的custom-class不生效
weixin_44891495的博客
10-22 3450
element-plus dialog的custom-class不生效
uniapp 给自定义组件或uview等ui组件加class样式或修改样式在微信小程序不生效的情况
热门推荐
qq_39879542的博客
10-19 2万+
uniapp微信小程序样式问题
根据条件动态修改element 组件深层次样式
凉城玖的博客
06-01 2258
开发前提： vue elementUI 在开发中有时候 element 中我们使用的某个组件的样式不符合我们的需求，直接写行内样式，有时候会发现并不会生效，直接将样式写在 style 标签中虽然样式会生效，但是不符合我们动态修改样式的需求。 因此可以考虑在给 使用的ui组件 动态添加一个类名，或套上一个 div ，动态在这div上添加类名，然后再下方 style对应类名下写 要修改的 组件样式。 下面贴上我的代码： <div class="item"> <el-radio
element ui dialog custom-class不生效
weixin_42208184的博客
05-08 2万+
自己记录一下：最近使用el-dialog中的custom-class，修改发现样式不生效 图中可以看出页面已经渲染出设置的custom-class类，但是实际上样式并没有生效 左图为页面渲染，右图为自定义类名 解决办法：在设置的类名前加上.el-dialog，这样自定义 的类样式就生效了 ...
vant样式改不动？进入调试器找生成的class类名设置样式
weixin_41033048的博客
09-12 5684
vant样式改不动？进入调试器找生成的class类名设置样式 用vue写的项目需要注意的地方是，在scoped里修改是无法做到修改vant样式的，这是外部引入的。我们需要新建一个，然后在里面用自己的类名限定住这个样式的修改。举例： ...
vant组件修改样式_解决vant-UI库修改样式无效的问题
05-24
要修改 Vant 组件的样式，可以通过以下几种方式实现： 1. 使用 Vant 提供的自定义主题功能，通过修改主题色、字体大小、边框样式等属性，来改变组件的样式。具体操作可以参考 Vant 官方文档中的“定制主题”一节。 2. 在单个组件中使用 scoped 样式，通过给组件的根元素添加 scoped 属性，来限制样式的作用域，避免样式冲突。例如： ```html <template> <van-button class="my-button">按钮</van-button> </template> <style scoped> .my-button { background-color: red; color: white; } </style> ``` 3. 在全局样式中使用 !important 关键字，强制覆盖 Vant 组件的样式。例如： ```css .van-button { background-color: red !important; color: white !important; } ``` 需要注意的是，使用 !important 关键字可能会带来样式的覆盖问题，建议在使用时慎重考虑。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值