覆盖Vant自带样式

最新推荐文章于 2024-08-19 21:01:51 发布

浅端

最新推荐文章于 2024-08-19 21:01:51 发布

阅读量5k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue报错记录 Vue 文章标签： vue css vue.js css3 es6

本文链接：https://blog.csdn.net/qq_40686529/article/details/105851284

Vue 同时被 2 个专栏收录

26 篇文章

订阅专栏

Vue报错记录

17 篇文章

订阅专栏

本文介绍了在Vue项目中如何覆盖Vant框架的默认样式，通过三个步骤：找到要覆盖的class，添加 scoped 属性并新建样式。讨论了scope的作用，并提供了一个覆盖tab栏样式的例子。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直入主题，猜你也是来看解决办法的/滑稽脸。

解决办法：

①找到你要覆盖的class。
②在你新的样式上加!important(一定要记住)。
③我使用的是Vue，我猜你也是。
新建一个<style></style>(Vue中存在两个<style></style>)样式也能生效。
这是因为我们平时默认生成的style都是这种带scope的<style scoped>，
scope的作用是为class创建一个作用域，即该scope下的class只在这个组件下生效，防止不同组件间样式覆盖。

如果看了这三点还是不懂，

请看例子。

我覆盖了vant中的tab栏样式

<style lang="stylus" scoped>
.tab-fa-gui
 .van-tabs__wrap
  position: sticky !important
  top: 5.623667rem !important
  z-index: 999 !important
</style>

在这里插入图片描述
------------------------------------------------------------------END------------------------------------------------------------