Vue3Datepicker scoped样式不生效问题求助

你遇到的问题核心是：Vue的scoped样式只会作用于当前组件的DOM元素，但Vuepic的日期选择器弹出层是挂载到document.body下的，不在当前组件的DOM树范围内，所以scoped样式无法穿透到弹窗上。

解决方法有两种，推荐第一种：

方法一：使用深度选择器穿透scoped限制 #

在scoped样式里用:deep()（Vue3语法）来强制样式穿透到子组件（包括挂载到body的弹窗），这样样式只会作用于当前组件内的日期选择器：

<style scoped>
:deep(.dp__theme_light) {
  --dp-highlight-color: rgba(34, 233, 8, 0.993);
  --dp-primary-color: #ff006f;
  --dp-primary-text-color: #000078;
}
</style>

如果是Vue2项目，把:deep()换成::v-deep或者/deep/即可。

方法二：给单个日期选择器加自定义类名，缩小样式范围 #

如果怕深度选择器不小心影响其他组件，可以给目标日期选择器单独加个自定义类，再结合深度选择器：

1. 组件上添加自定义类：

<Datepicker class="my-custom-datepicker" />

2. 编写scoped样式：

<style scoped>
:deep(.my-custom-datepicker .dp__theme_light) {
  --dp-highlight-color: rgba(34, 233, 8, 0.993);
  --dp-primary-color: #ff006f;
  --dp-primary-text-color: #000078;
}
</style>

这样样式只会作用于带my-custom-datepicker类的日期选择器，完全不会影响其他组件。

内容的提问来源于stack exchange，提问作者Billal BEGUERADJ