vue项目中如何自定义修改第三方UI组件库CSS样式？

以在项目中使用vant-ui库为例。使用vant的tabbar标签栏，用于底部导航栏，在不同页面之间进行切换。

tab-bar.vue 文件

<template>
    <div class="tab-bar">
        <van-tabbar v-model="active">
            <van-tabbar-item icon="home-o">标签</van-tabbar-item>
            <van-tabbar-item icon="search">标签</van-tabbar-item>
            <van-tabbar-item icon="friends-o">标签</van-tabbar-item>
            <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
	</van-tabbar>
    </div>
</template>
<script setup>
import { ref } from 'vue'
const active = ref(0)

</script>

<style lang="less" scoped>
   .tab-bar {
   }
</style>

1.修改css变量，覆盖它默认变量的值。
  当我们想要将tabbar标签栏的文字大小，修改为22px。在vant文档中查找，组件库的样式变量，刚好找到有个--van-tabbar-item-font-size 变量。

<style lang="less" scoped>
    .tab-bar {
        --van-tabbar-item-font-size: 22px;
    }
</style>

如果想全局修改，创建一个单独的css文件，在:root{} 中修改，则会影响所有的组件（不推荐）。

2. :deep(xxx) 查找对应的子组件类选择器，进行修改。

<style lang="less" scoped>
    .tab-bar {
	:deep(.van-tabbar-item__text) {
            font-size: 22px;
        }
</style>

画图给大家看一下：

如图所示，当前的tar-bar.vue文件中，是没有.van-tabbar-item__text这个css类选择器，只有van-tabbar-item子组件中才有，因为使用了scope局部作用域，所以必须要用:deep()语法，从van-tabbar-item 组件中 找到 .van-tabbar-item__text 类选择器，进行修改覆盖。