如何更改V-Calendar软件包输入元素的CSS样式？

Question

我需要建议。我使用V-Calendar包来自定义input元素的样式。我使用了这样的代码，但是这种方法没有产生结果。

<template>
    <v-date-picker
        class='date-picker'
        mode='range'
        v-model='range'
        :show-day-popover=false
        is-double-paned
        show-caps>
    </v-date-picker>
</template>

<style scoped>
    .date-picker input{
        display: block !important;
        width: 100% !important;
        color: #495057 !important;
        background-color: #fff !important;
        background-clip: padding-box !important;
        border: 1px solid #ced4da !important;
        transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out !important;
        padding: .25rem .5rem !important;
        font-size: .875rem !important;
        line-height: 1.5 !important;
        border-radius: .2rem !important;
    }
</style>

第二个问题是如何删除此指针：

Answer 1

您将scoped用于CSS，建议您使用深度选择器

.date-picker /deep/ input {
    display: block !important;
    width: 100% !important;
    color: #495057 !important;
    background-color: #fff !important;
    background-clip: padding-box !important;
    border: 1px solid #ced4da !important;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out !important;
    padding: .25rem .5rem !important;
    font-size: .875rem !important;
    line-height: 1.5 !important;
    border-radius: .2rem !important;
}

Deep selector reference

Answer 2

您需要调整.direction-*类，尤其是边框。检查悬停事件，您会发现它插入了一个元素，其类为.direction-*-*，其含义是：上，左，右等。 Here's来自源的链接，请看它如何根据popover的位置添加一些像素。

首先，尝试一些!important规则，直到找到正确的修补程序。您也可以重新编译文件以满足您的需要。不要忘了borders类中的.popover-*，它们也位于链接中。

事件看起来像是在代码中内联，所以可能是个问题。