如何覆盖Vuetify的禁用输入的边框颜色

Question

这不是常见的情况，我想提前提到这一点。我需要覆盖vuetify的禁用输入字段的边框颜色。

我试过

<v-text-field class="type-input" dense outlined v-model="type" label="Type" disabled></v-text-field>

请检查我的小提琴

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

<template id="mainbox">
<v-container>
<v-row>
<v-col cols="12">
<v-card outlined>

<div class="text-overline mb-4">
{{ title }}
</div>
<!-- -------------------------------------------------------------------------- -->
<div class="py-10"></div>
<!-- -------------------------------------------------------------------------- -->
<!-- TEST CODE -->
<!-- --------- -->


<v-text-field class="type-input" dense outlined v-model="type" label="Change my border please" disabled></v-text-field>

<!-- -------------------------------------------------------------------------- -->
<div class="py-10"></div>
<!-- -------------------------------------------------------------------------- -->
<!-- END TEST CODE -->
<!-- --------- -->


</v-card>
</v-col>
</v-row>
</v-container>
</template>

<v-app id="app">

<!-- -------------------------------------------------------------------------- -->
<!-- TITLE -->
<!-- ----- -->

<mainbox title="$CODE_08" />

<!-- -------------------------------------------------------------------------- -->

</v-app>
<script type="text/javascript">
const mainbox = Vue.component('mainbox', {
template: '#mainbox',
props: {
title: String
},
data() {
return {
showAppBar: true,
alert: true,
alertColor: 'green',
alertMessage: 'Success Message Test .... !!!! '
}
},
methods: {
doSomething() {
this.showAppBar = !this.showAppBar
this.alert = true,
this.alertColor = 'green',
this.alertMessage = 'test'
}
}
});

new Vue({
el: "#app",
vuetify: new Vuetify(),
components: {
mainbox
}
});
</script>

<style scoped>
>>> .type-input {
border: blue 2px solid;
}
</style>

我不能让它工作。

Answer 1

编辑

正如igor在下面提到的，您应该使用.type-input.v-input--is-disabled fieldset作为CSS选择器，以达到最具体的效果。

---

您需要赢得"；特定战争；为了解决这个问题。因此，如果您将使用.v-text-field--outlined fieldset作为css选择器，它应该可以工作。

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">


<template id="mainbox">
<v-container>
<v-row>
<v-col cols="12">
<v-card outlined>


<div class="text-overline mb-4">
{{ title }}
</div>

<!-- -------------------------------------------------------------------------- -->
<div class="py-10"></div>
<!-- -------------------------------------------------------------------------- -->
<!-- TEST CODE -->
<!-- --------- -->


<v-text-field class="type-input" dense outlined v-model="type" label="Change my border please" disabled></v-text-field>



<!-- -------------------------------------------------------------------------- -->
<div class="py-10"></div>
<!-- -------------------------------------------------------------------------- -->
<!-- END TEST CODE -->
<!-- --------- -->




</v-card>

</v-col>
</v-row>
</v-container>
</template>


<v-app id="app">


<!-- -------------------------------------------------------------------------- -->
<!-- TITLE -->
<!-- ----- -->



<mainbox title="$CODE_08" />


<!-- -------------------------------------------------------------------------- -->


</v-app>

<script type="text/javascript">
const mainbox = Vue.component('mainbox', {
template: '#mainbox',
props: {
title: String
},
data() {
return {
showAppBar: true,
alert: true,
alertColor: 'green',
alertMessage: 'Success Message Test .... !!!! '
}
},
methods: {
doSomething() {

this.showAppBar = !this.showAppBar

this.alert = true,
this.alertColor = 'green',
this.alertMessage = 'test'

}
}
});


new Vue({
el: "#app",
vuetify: new Vuetify(),
components: {
mainbox
}
});

</script>


<style scoped>

.v-text-field--outlined fieldset {
border: blue 2px solid;
}

</style>

---

另一个解决方案是在您的类上使用!important，但我个人认为这不是一个优雅的解决方案