vue3设置第三方组件 样式::v-deep

在Vue 3中，使用了Composition API的组件可以通过<style>标签内部的::v-deep选择器来深入作用于第三方组件的样式。::v-deep是一个 Scoped CSS 的“深度选择器”，可以穿透组件边界，影响子组件的样式。比如我想修改el-date-picker的颜色边框。

<template><div><ThirdPartyComponent><!-- 第三方组件的内容 --></ThirdPartyComponent></div>
</template><script>
import { defineComponent } from 'vue';
import ThirdPartyComponent from 'some-third-party-component';export default defineComponent({components: {ThirdPartyComponent}
});
</script><style scoped>
::v-deep .third-party-class {color: blue; /* 覆盖第三方组件中.third-party-class的颜色 */
}
</style>

在这个例子中，ThirdPartyComponent是一个假设的第三方组件。我们通过::v-deep选择器指定了一个选择器.third-party-class，并且在<style>标签中设置了样式。由于scoped属性的存在，这些样式只会应用于当前组件，但::v-deep允许我们选择子组件中的DOM元素并对其应用样式。