修改 element-ui 组件 el-tabs 的选项卡字体大小样式

最近遇到了一个需求，el-tab-pane的label属性默认的字体大小为14px，在一个光秃秃的页面上展示时很小，需要把字体改大一些。

这还不简单？

我直接f12打开开发者模式，样式选择器选择el-tabs-pane，选择style，查看.el-tabs__item的font-size:14px；属性。好，就是他，代码里直接改！

  

   

    

     

    
    

     

      <style>
      
     
    
   

    

     

    
    

     

      .el-tabs__item{
     
    
   

    

     

    
    

     

      font-size:
      18px 
      !important;
     
    
   

    

     

    
    

     

      }
     
    
   

    

     

    
    

     

      </style>
     
    
  

大功告成！刷新页面一看！卧槽？怎么回事，我怎么把全局样式改了？害，没事，这还难得到我？我直接反手就是一个scoped

  

   

    

     

    
    

     

      <style scoped>
      
     
    
   

    

     

    
    

     

      .el-tabs__item{
     
    
   

    

     

    
    

     

      font-size:
      18px 
      !important;
     
    
   

    

     

    
    

     

      }
     
    
   

    

     

    
    

     

      </style>
     
    
  

再一刷新，这下总该完成了吧？等等，这虽然其他的缩小了，但是我要放大的咋没放大？！！！！！眉毛一皱，发现事情并不简单。

scoped是作用在本页面没错，但是el-tab-pane作为一个外部引入的组件，好像不受这个控制？

那只能放大招了，使用 /deep/强制渲染！

  

   

    

     

    
    

     

      /deep/.el-tabs{
     
    
   

    

     

    
    

     

      .el-tabs__item{
     
    
   

    

     

    
    

     

      font-
      size:
      18px;
     
    
   

    

     

    
    

     

      }
     
    
   

    

     

    
    

     

      }
     
    
  

这样就解决了。挺好，我正沾沾自喜，需求眼镜一推，小样，我能让你这么轻松？再给我加个el-tab-pane，字体大小颜色和样式都要和上面那个不一样的！

我当场吐血，心里把这需求打了一万遍，就你有嘴，就你会叭叭叭。但是谁还不是社畜了，心里我重拳出击，表面我还得唯唯诺诺。需求还得完成，咋办？

我仔细一看这选项卡的字体，呀，原来是你小子！

<el-tab-pane label="选项卡1" name="value1"></el-tab-pane>

这下好办了，但凡是你带个label属性，就没有难道我的。

  

   

    

     

    
    

     

      <el-tab-pane name="value1">
      </el-tab-pane>
     
    
   

    

     

    
    

     

      <span slot="label" class="fontClass">选项卡1
      </span>
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      <style>
      
     
    
   

    

     

    
    

     

      .fontClass{
     
    
   

    

     

    
    

     

      font-size:
      72px;
     
    
   

    

     

    
    

     

      font-family: Microsoft Yahei;
     
    
   

    

     

    
    

     

      }
     
    
   

    

     

    
    

     

      </style>
     
    
  

直接使用span标签来展示文字，使用其slot属性，改为label，会自动嵌入上一级el组件里(如果该组件有label属性的话)。接下来给这个span加个类选择器，直接给其增加样式就OK了。

八十，八十，八十，大哥，搞定了！