javascript - 如何更改 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

你正在为 css 使用 scoped，我建议你使用深度选择器

.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