[英]vuejs-datepicker change styles doesn't work
I'm trying to change the styles of a vuejs-datepicker ( https://www.npmjs.com/package/vuejs-datepicker )我正在尝试更改 vuejs-datepicker ( https://www.npmjs.com/package/vuejs-datepicker ) 的样式
<datepicker
format="dd/MM/yyyy"
calendar-class="my_calendar"
input-class="textfield"
name="my_date" />
In the styles section I define this rule, but my datepicker doesn't change the width在样式部分我定义了这个规则,但我的日期选择器不会改变宽度
.my_calendar {
width: 100px !important;
}
Any idea?任何的想法? Or other plugin for use a datepicker in vuejs?
或者其他在 vuejs 中使用日期选择器的插件?
Thanks谢谢
Try /deep/ to change css property from parent :尝试 /deep/ 从父更改 css 属性:
/deep/ .className { Css property } /deep/ .className { Css 属性}
CSS for vuejs datepicker can be passed as a prop. vuejs datepicker 的 CSS 可以作为道具传递。 There are 3 props, wrapper-class, input-class and calendar class.
有3个道具,包装类,输入类和日历类。 For example
例如
<datepicker input-class="rounded w-1/2" calendar-class="rounded"></datepicker>
Note : Tailwindcss classes used here.注意:此处使用的 Tailwindcss 类。
Try adding module style.尝试添加模块样式。 You want to add styles to
calendar-class
.您想向
calendar-class
添加样式。 So try it this way:所以试试这样:
<datepicker :class="$style.input" inputClass="input" />
<style module>
input {
width: 100%;
cursor: default;
}
</style>
Note: I was facing a similar issue with input class.注意:我在输入类方面遇到了类似的问题。 This worked out for me.
这对我有用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.