在修改vant默认样式时发现用!important都没有效果,原因:

由于vue开发时会在style加上scoped避免全局污染,所以正常开发时直接修改外部组件(vant)的样式时会不生效,我们把scoped删除后会发现样式是可以生效的。但是scoped是肯定不能不要的。

创建一个单独修改vant样式的页面,在里面修改你需要修改的vant默认样式

所以我们可以用 /deep/(深度)来修改样式 

/deep/.van-tab--active {
    color: $main-color !important;
    font-weight: 550;
  }
 
  /deep/.van-tabs__line {
  width: 132px !important;
  background-color: $main-color !important;
}
/deep/.van-tabs--line .van-tabs__wrap {
  height: 50px;
  border-bottom: 1px solid #ebeef5 !important;
}

 

Logo

前往低代码交流专区

更多推荐