修改第三方UI组件库样式的四种方法

前提：当我们要修改vant组件库中Tabbar图标大小的样式（原图标是字体图标，大小由font-size控制）。

字体图标字体大小由css变量（--van-tabbar-item-icon-size）控制，

1.插槽方法

结论：当你想要自定义使用插槽时，插入自己的元素，那么可以直接在当前作用域直接修改元素的样式。

<van-tabbar-item badge="3">
    <span>自定义</span>
    <template #icon="props">
      <img :src="props.active ? icon.active : icon.inactive" />
    </template>
  </van-tabbar-item>

<style>
    img {
        height:28px
    }
</style>

传入图片，用height属性控制图片大小，达到与字体图标相同效果

2.全局定义变量

结论：全局定义一个变量，覆盖它默认变量的值定义变量

缺点：全局修改。

:root {
    
     --van-tabbar-item-icon-size: 30px !important;
    /* 全局修改: 任何地方只要用到-van-tabbar-item-icon-size都会被修改掉 */
 
}

重新定义全局的css变量（--van-tabbar-item-icon-size），用来覆盖原有的字体图标的（--van-tabbar-item-icon-size）变量

3.局部定义变量

结论：局部定义变量，覆盖它原来默认变量值。

优点：局部修改

<style lang='less' scoped>
.van-tabbar{
    --van-tabbar-item-icon-size: 30px !important;
}
</style>

重新局部定义css变量（--van-tabbar-item-icon-size），用来覆盖原有的字体图标的（--van-tabbar-item-icon-size）变量，该重新定义的变量只在van-tabbar类下元素中生效。

4.:deep(子组件元素选择器)

结论：直接查找对应的子组件选择器，进行修改属性。

:deep（子组件元素选择器）进行修改，直接修改css

<style lang='less' scoped>
:deep(.van-tabbar-item__icon ){
  font-size: 24px;
}
</style>

:deep(子组件元素选择器)，穿透scoped限制的作用域，可以直接找到子组件的类，对其生效。

scoped限制编写的选择器属性只作用于当前文件下的模板