element-ui 修改Tabs标签页样式 深度选择器

文章展示了如何利用SCSS的深度选择器`::v-deep`来修改Vue组件内部的样式,包括改变`.el-tabs__item`的活动状态颜色、字体大小和权重,调整内边距,隐藏`.el-tabs__active-bar`和`.el-tabs__nav-wrap::after`元素,以及消除`.el-tabs__header`的外边距,从而实现更精细的UI定制。
摘要由CSDN通过智能技术生成

官方样式:

.

修改之后:

代码如下,通过深度选择器进行修改:

<style lang="scss" scoped>
  

  .el-tabs  {
    /* 深度选择器 */
    ::v-deep .el-tabs__item.is-active {
      color: #000;
      font-size: 16px;
      font-weight: bold;
    }
    ::v-deep .el-tabs__item{
      color: #999;
      padding: 0 10px;
    }
    ::v-deep .el-tabs__active-bar{
      display: none;
    }
    ::v-deep .el-tabs__nav-wrap::after{
      display: none;
    }
    ::v-deep  .el-tabs__header{
      margin: 0;
    }
  }

 </style>

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值