Vue 3 Datepickerにてcss設定をする方法

# Vue 3 Datepickerとは
Vue3(Nuxt3)用の日付ピッカーのライブラリです。
機能が充実しており、基本的なことは全てこなしてくれます!
詳しくは[ドキュメント](https://vue3datepicker.com/)を読んでください。

# Vue 3 Datepickerにてcss設定をする方法
ドキュメントの最後にThemeにてCSSを適用する方法が記載されていましたが、躓いてしまったので共有です!
(Nuxt3を使用していますが、Vue3も同様かと思います。)

## 失敗例
公式ドキュメントを例に一旦書いてみようと思い、以下のようにしました。

```vue
<template>
    <div>
        <Datepicker v-model="date" class="dp__theme_dark" />
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Datepicker from '@vuepic/vue-datepicker';
import '@vuepic/vue-datepicker/dist/main.css';

const date = ref();
</script>

<style>
.dp__theme_dark {
    --dp-background-color: green;
    --dp-text-color: #fff;
    --dp-hover-color: #484848;
    --dp-hover-text-color: #fff;
    --dp-hover-icon-color: #959595;
    --dp-primary-color: red;
    --dp-primary-disabled-color: #61a8ea;
    --dp-primary-text-color: #fff;
    --dp-secondary-color: yellow;
    --dp-border-color: #2d2d2d;
    --dp-menu-border-color: red;
    --dp-border-color-hover: #aaaeb7;
    --dp-disabled-color: #737373;
    --dp-disabled-color-text: #d0d0d0;
    --dp-scroll-bar-background: #212121;
    --dp-scroll-bar-color: #484848;
    --dp-success-color: blue;
    --dp-success-color-disabled: #428f59;
    --dp-icon-color: #959595;
    --dp-danger-color: #e53935;
    --dp-marker-color: #e53935;
    --dp-tooltip-color: #3e3e3e;
}
</style>
```

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/433195/bef93549-f225-e4f6-2737-3e5a8cf608b8.png)

`<style>`にcssを記述して`class`にて使用する形にしました。
しかし、この方法ではピッカーにスタイルが設定されませんでした。

## 成功例
[同じ失敗をしている方](https://github.com/Vuepic/vue-datepicker/issues/84)が居たので解決できました。
修正点として`class=""`でcssの設定をしないようにします。

```vue
<template>
    <div>
        <Datepicker v-model="date" dark />
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Datepicker from '@vuepic/vue-datepicker';
import '@vuepic/vue-datepicker/dist/main.css';

const date = ref();
</script>

<style>
.dp__theme_dark {
    --dp-background-color: green;
    --dp-text-color: #fff;
    --dp-hover-color: #484848;
    --dp-hover-text-color: #fff;
    --dp-hover-icon-color: #959595;
    --dp-primary-color: red;
    --dp-primary-disabled-color: #61a8ea;
    --dp-primary-text-color: #fff;
    --dp-secondary-color: yellow;
    --dp-border-color: #2d2d2d;
    --dp-menu-border-color: red;
    --dp-border-color-hover: #aaaeb7;
    --dp-disabled-color: #737373;
    --dp-disabled-color-text: #d0d0d0;
    --dp-scroll-bar-background: #212121;
    --dp-scroll-bar-color: #484848;
    --dp-success-color: blue;
    --dp-success-color-disabled: #428f59;
    --dp-icon-color: #959595;
    --dp-danger-color: #e53935;
    --dp-marker-color: #e53935;
    --dp-tooltip-color: #3e3e3e;
}
</style>
```
![スクリーンショット 2023-06-27 19.05.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/433195/fec968a5-4ac0-475c-edd2-b05dba3175bb.png)
元々`Datepicker`には`.dp__theme_light`と`.dp__theme_dark`が定義されていたので、
オーバーライドする形で書いてあげれば適用されます。
(デフォルトでは`.dp__theme_light`となっており`dark`を設定すると`.dp__theme_dark`に切り替わります。)

## 個人的失敗例
個人的な失敗例も共有しておきます。
以下のようにスコープ付きcssを使用するとオーバーライドされないので失敗します。
```vue
<template>
    <div>
        <Datepicker v-model="date" dark />
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Datepicker from '@vuepic/vue-datepicker';
import '@vuepic/vue-datepicker/dist/main.css';

const date = ref();
</script>

<style scoped>
.dp__theme_dark {
    // 省略
}
</style>
```

# 最後に
以上がVue 3 Datepickerにてcss設定をする方法でした。
開発のお役に立てれば幸いです。
[@morikeigo_](https://twitter.com/morikeigo_)