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

我遇到了同样的问题，并且 defaualt css 在限定范围时不起作用。现在，执行以下步骤将样式应用于 Vuejs 日期选择器和时间选择器

1. 使用 input-class="--your--class--name-here" 代替类
2. 在作用域样式标记下使用另一个不应限定范围的样式标记

'

<template>
<div>
<datepicker
v-model="startDate"
input-class ="my-picker-class"
placeholder="Start Date"
</datepicker>       
</div>
</template>
<style>
.my-picker-class{
border: none !important;
border-bottom: 1px solid #F26F31 !important;
}
</style>

' 3.在这里，我使用了我的类名.my-picker-class并在那里应用了样式，不要忘记在样式的末尾给出"！important">

Answer 2

尝试/deep/从父级更改 css 属性：

/deep/.className { 锰式属性 }

Answer 3

尝试添加模块样式。您想要向calendar-class添加样式。所以试试这样：

<datepicker :class="$style.input" inputClass="input" />
<style module>
input {
width: 100%;
cursor: default;
}
</style>

注意：我在输入类中遇到了类似的问题。这对我来说很有效。

Answer 4

vuejs datepicker 的 CSS 可以作为道具传递。有 3 个道具，包装类、输入类和日历类。例如

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

注意：此处使用的顺风类。