周凯,个人博客

  • 前端
  • 嵌入式
  • 工具
  • 后端
  • 随笔
个人记录
  1. 首页
  2. 前端
  3. vue3
  4. 正文

vant4 页面使用Popup,导致Toast样式变成白底

2024年 8月 22日 1434点热度 0人点赞 0条评论
  • vant4 的 Popup组件使用,会导致Toast组件样式发生变化,背景色变成白底

    原因是:单独使用 Toast 组件,Toast 样式顶掉了Popup样式;如果使用了Popup组件,就会重新多添加一次Popup样式,就导致后添加的Popup样式顶掉了Toast样式,就造成样式冲突,Toast就变成白底了
  • 解决方法:

    • 在 基础css文件中,或者最外层css文件,强制 !important 样式为默认样式
      /* vant4的 Toast 和 Popup 样式冲突,会导致 Toast 变成白底 */
      .van-popup.van-toast{
      background: var(--van-toast-background) !important;
      box-sizing: content-box !important;
      /* 下面3条css,影响不大 */
      transition: all var(--van-duration-fast) !important;
      width: var(--van-toast-default-width) !important;
      max-width: var(--van-toast-max-width) !important;
      }
      .van-popup.van-toast .van-toast__icon{
      font-size: var(--van-toast-icon-size) !important;
      }

🎯 拓展阅读提示

本文涉及的内容已同步至公众号后台,我会在那里分享更多深度内容和实用技巧

→ 点击关注:一行梦境

公众号二维码
本作品采用 知识共享署名 4.0 国际许可协议 进行许可
标签: 暂无
最后更新:2024年 8月 22日

周凯

这个人很懒,什么都没留下

打赏 点赞
< 上一篇
下一篇 >

文章评论

razz evil exclaim smile redface biggrin eek confused idea lol mad twisted rolleyes wink cool arrow neutral cry mrgreen drooling persevering
取消回复

COPYRIGHT © 2022-现在 周凯,个人博客. ALL RIGHTS RESERVED.

Theme Kratos Made By Seaton Jiang

蒙ICP备18004897号