在Vue项目中引入第三方UI库时，我们经常会面临这样的问题：UI组件的样式不符合我们的需求，需要修改其中的样式
修改组件库的样式通常有几种方案，下面我们以Vue项目中引入Vant组件库为例，进行演示：
<template>
<div>
<h2>Home</h2>
<van-button>按钮</van-button>
</div>
</template>
它将会在页面中显示一个Vant的按钮：
如果我们先要修改这个按钮的样式，通常有几种思路：
- 查看组件库文档来查看该按钮组件是否提供相关的API，如果已经提供了，则直接使用相关的API即可
比如在Vant中Button提供的API：
可以看到它已经提供好了部分样式的修改API，我们可以直接使用
- 如果没有提供相关的API，我们需要通过浏览器控制台来查看具体的CSS样式及相关的类名
通过浏览器检查页面中的按钮：
可以看到有些样式是通过CSS变量的形式进行设置的，因此我们可以在相关的CSS作用域给变量重新赋值来进行样式的修改，比如我们这里的例子是在Home组件中，因此我们可以在Home组件的CSS Scope中定义一个相同的变量来修改样式：
<template>
<div class="home">
<h2>Home</h2>
<van-button>按钮</van-button>
</div>
</template>
<script setup>
</script>
<style scoped>
.home {
--van-button-normal-font-size: 30px;
}
</style>
当然，如果某个变量需要在全局作用域中生效，我们也可以在全局的CSS样式中重写这个变量
- 如果组件中某些样式并没有使用对应的CSS变量设置，这种情况我们就需要找到对应的类名并进行样式的重写
例如：
<template>
<div class="home">
<h2>Home</h2>
<van-button>按钮</van-button>
</div>
</template>
<style scoped>
.home :deep(.van-button__text) {
color: pink;
}
</style>
注意：
当在中需要修改其它组件中的样式时，我们需要使用Vue提供的:deep()伪类，它能够帮助我们编写的样式影响到子组件
