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 可以作为 prop 传递。有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>

注意：我在输入类方面遇到了类似的问题。这对我有用。