Vue Datepicker のボックスの大きさを調整する

概要

Vue Datepicker のボックスの大きさを、隣の Vuetify の Text fields (<v-text-field />) に似せてみました。

Vue Datepicker とは

Vue 3 用の datepicker です。詳しい使い方や機能については、ここでは割愛します。
公式サイト: https://vue3datepicker.com/

本題

そもそも Vue Datepicker には、ボックスの高さや枠線の丸みを変えるオプションが用意されていません。（たぶん。あったらごめんなさい。）
デフォルトの Vue Datepicker の隣に Vuetify の Text fields (<v-text-field />) を density="comfortable" で置くと、このようにズレがうまれて、あまりうれしくありません。

だったら CSS を直にいじってやろう、という話です。

HTML を見てみる

Vue Datepicker は <input /> タグで定義されていて、そこにいくつか class があてられていることがわかります。そのなかでも .dp__input をいじればよさそうです。

そこで実際にあてた style が以下になります。

.dp__input {
  border-radius: var(--dp-border-radius, 6px);
  line-height: 2.15rem;
}

いい感じになりました。

それでは！