vuejs-datepicker 更改樣式不起作用

Question

我正在嘗試更改 vuejs-datepicker ( https://www.npmjs.com/package/vuejs-datepicker ) 的樣式

 <datepicker
   format="dd/MM/yyyy"
   calendar-class="my_calendar"
   input-class="textfield"
   name="my_date" />

在樣式部分我定義了這個規則，但我的日期選擇器不會改變寬度

.my_calendar {
  width: 100px !important;
}

任何的想法？ 或者其他在 vuejs 中使用日期選擇器的插件？

謝謝

Answer 1

嘗試 /deep/ 從父更改 css 屬性：

/deep/ .className { Css 屬性}

Answer 2

vuejs datepicker 的 CSS 可以作為道具傳遞。 有3個道具，包裝類，輸入類和日歷類。 例如

<datepicker input-class="rounded w-1/2" calendar-class="rounded"></datepicker> 

注意：此處使用的 Tailwindcss 類。

Answer 3

嘗試添加模塊樣式。 您想向calendar-class添加樣式。 所以試試這樣：

    <datepicker :class="$style.input" inputClass="input" />

    <style module>
      input {
         width: 100%;
         cursor: default;
      }
    </style>

注意：我在輸入類方面遇到了類似的問題。 這對我有用。