Vue3 datepicker: scoped styles not working

February 23, 2024

I am using Vuepic/ Vue3Datepicker and I want to customize the way a selected date looks like. As per the documentation, we can do that this way for the light mode:

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

This works fine except this applies to all the component where I use this date picker:

The solution is to write:

<style scoped>
  ...
</style>

but this does not work at all: the style does not apply neither in this specific component nor elsewhere. id est, I the default theme colors apply in this case, and mine are ignored:

Anything I missed ?

>Solution :

For scoped CSS to affect child components target a class on the root child element and use the :deep() selector on the class you actually want to target

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