Vant 在小程序中修改外部样式类不生效

7月前作者：海阔天空6688 分类：Toy博客阅读(39) 违法举报

这篇具有很好参考价值的文章主要介绍了Vant 在小程序中修改外部样式类不生效。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

以vant-cell为例

如果要修改vant-cell中的value样式，正常情况下的写法是这样的，但是呢就是不生效，因为已经有默认的样式了

value-class="height:100rpx;font-size:38rpx;margin-top:30rpx"

要如何进行修改呢，必须找到对应的组件要修改的属性名，然后再添加!important才会生效,下面这种写法修改vant-cell中的value样式才会生效。

.van-cell__value{
    color: rgba(0, 0, 0, 0.884) !important ;
 }

其他的组件要修改样式的话，部分可以按照这种的写法进行尝试，应该都是可以的，如果这种方式不行的话，打开调试器，通过箭头来查询组件对应的样式，在style中查看样式名，进行修改，但是不要忘记每行属性添加 !important，否则不生效。文章来源地址https://www.toymoban.com/news/detail-535632.html

到了这里，关于Vant 在小程序中修改外部样式类不生效的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：

领支付宝红包赞助服务器费用

微信小程序修改vant组件样式

1 背景在使用vant组件开发微信小程序的时候，想更改vant组件内部样式，达到自己想要的目的（van-grid组件改成宫格背景色为透明，默认为白色），官网没有示例，通过以下几步修改成功。 2 步骤 2.1 查看官方文档 Grid 外部样式类支持修改Grid组件样式，我们在组件上添加该属

2024年02月09日
浏览(50)
vue 全局引用vant 项目打包之后vant样式不生效

描述： vue全局引用vant-UI框架，本地开发时没有问题；项目打包部署之后，vant样式部分失效。查看控制面板，定位到vant样式表，发现样式表没有全部加载。解决：下载 vant-ui-style.css 样式表，本地引用。 vant-ui-style.css 放在 public 文件夹下，在 index.html 中调用注意：（1）若

2024年02月11日
浏览(52)
[已解决]vant 样式不生效

样式效果如下所示（ tip：这里采用van-button标签）：打开开发者工具，发现是这里的原因（ tip：van-nav-bar_title是van-button的父节点）对此，应进行如下更改然后我刷新没有改变，打开开发者工具发现样式没有改变到此，我就到网上进行查询，大部分说的都是vant下载引用的

2024年02月09日
浏览(31)
微信小程序Vant Weapp-Card 商品卡片自定义修改样式

商品卡片，用于展示商品的图片、价格等信息。官方文档给出的配置项对大多数人来说都太官方，这是官方给出的。高级用法可以通过插槽添加定制内容。在官方文档中给出的示例配置中，你根本无法调整中部宽度。 van-card

2024年03月24日
浏览(40)
小程序页面嵌套自定义组件无法修改vant-weapp样式的问题

问题描述：一般情况下，小程序想修改vant组件的样式只需要找到对应vant组件的类名，可以自由的在自己的wxss文件中进行修改。但当我们在自定义组件内引入vant元素，再将自定义组件内嵌到小程序某个页面中的时候，此时，自定义组件内的vant元素的样式就无法修改了。我

2024年02月16日
浏览(41)
如何在小程序中引入使用vant框架

vantUI框架常用于移动端页面组件的基础库构建，为了让用户获得更趋向于原生的体验，它是一种相当不错的方案选择。关于这个框架，它不仅有适用于移动端vue脚手架的版本，同时还存在可以兼容小程序开发的webapp版本。在微信小程序的原生组件较少的背景下，通常我们在开

2024年02月12日
浏览(28)
vant Weapp中 Cell单元格修改样式

解决！

2024年02月08日
浏览(38)
使用scss/less修改vant UI样式的方法

在vue实际项目开发中，我们避免不了使用一些开源的UI组件库，style的样式中都会增加 scoped 标识只会在当前页面中去使用，这就涉及到了如何修改默认组件样式的问题了。 1.在使用scss的情况下，要使用::v-deep，/deep/是不支持的，会报错。 2.在使用less的情况下，使用::v-deep或

2024年02月13日
浏览(27)
微信小程序 - ＜textarea＞多行文本输入框 placeholder 属性换行显示文字（适用于 vant-weapp 的 Field 输入框文本域组件 van-field）样式修改的详细教程

网上大部分教程都无法解决，本文提供最新最好的解决方案。帮助您将 textarea 多行文本框的 placeholder 文字描述换（断）行处理，提供详细的运行示例，代码干净整洁，如下图所示，您只需要复制粘贴几秒钟就可以实现该功能：建议您使用一键复制功能，避免漏选。随便找

2024年02月12日
浏览(39)
微信小程序中 vant weapp 使用外部的icon作为图标的步骤

首先在当前项目的根目录中，创建assets文件夹，用于存放静态资源，assets里面的文件夹可以自己定义，图片，css… iconfont官网 https://www.iconfont.cn/ 添加一个图标到iconfont项目中，点击生成在线链接，记得选unicode，然后再生成在线链接（待会儿会使用）接着将当前项目的代码下

2024年02月05日
浏览(47)