使用vant样式修改不了问题

在修改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;
}

 

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值