vant [Bug Report] van-toast 背景颜色是白色

null

4.9.10

使用最新版的 vant 库，showFailToast 背景颜色被 van-popup 覆盖了

使用最新版的 vant 库，showFailToast 背景颜色被 van-popup 覆盖了

chrome

Dec 17 '24 08:12 chudongvip

好像是按需应用导致的，我写了一个简单示例，有时候打开是好的，有时候就是白色背景，项目复杂的时候就一直是白的 1734423894173

Dec 17 '24 08:12 ccav213

我也遇到了相同的问题，是按需引用动态加载css导致的，van-toast和van-pop权重是一样的，但是谁后引入谁起作用，导致van-pop的样式覆盖了van-toast

Dec 19 '24 03:12 galleonsZcc

大家按照我下面的更改可以解决这个问题：

// 引入组件样式
import 'vant/lib/index.css'
// 引入toast样式，否则无样式
import 'vant/es/toast/style'

Dec 19 '24 03:12 chudongvip

我相信这应该是一个 BUG，van-popup 应该作为基准样式，van-toast 则应该覆盖它

Dec 19 '24 03:12 chudongvip

同样的问题 version 4.9.15

Dec 23 '24 06:12 Deja-vuuu

明显就是规范错误了, 优先级管理混乱了....

Dec 25 '24 09:12 yyman001

最新版本还是有这样的问题，是没人维护了吗

Jan 28 '25 03:01 QzhouZ

只要是用到了van-popup ，toast dialog 都受影响

删除手动导入的代码就行了

Jul 04 '25 08:07 bestK

今天遇见了同样的问题版本号"vant": "^4.9.21",
楼上的这个方法确实能解决但是感觉只能是临时解决不知道后续官方会不会后续修复这个问题

JavaScript 在对应页面 // 引入组件样式 import 'vant/lib/index.css' // 引入toast样式，否则无样式 import 'vant/es/toast/style'

Dec 03 '25 04:12 biejiwaia

遇到了同样的问题...

Dec 10 '25 09:12 CrazyChenzi

通过手动引入函数式组件样式解决了该问题

// 引入函数式组件的样式 import 'vant/es/toast/style' import 'vant/es/dialog/style' import 'vant/es/notify/style' import 'vant/es/image-preview/style'

Dec 11 '25 06:12 CrazyChenzi