如何覆盖vuetify.js样式

Question

我有v-textarea元素，默认情况下它的边框是底部：

.v-text-field > .v-input__control > .v-input__slot:before {
    border-style: solid;
    border-width: thin 0 0 0

我想覆盖该类以使其没有边框，但是它不起作用。这是我的代码的外观：

  .v-text-field>>>.v-input__control>>>.v-input__slot:before{
      border-style: none !important;
  }

Answer 1

在Vue中，您可以使用作用域样式来确保样式仅适用于当前组件。这使您可以使用deep selector。

<style scoped>
.v-textarea >>> .v-input__slot:before {
  border-style: none;
}
</style>

您也可以使用不带作用域样式的常规css父/子选择器>。

<style>
.v-textarea > .v-input__control > .v-input__slot:before {
  border-style: none;
}
</style>

不全局影响所有v-textareas的另一种方法是使用自定义类。

<v-textarea class="my-textarea"></v-textarea>
<style>
.my-textarea > .v-input__control > .v-input__slot:before {
  border-style: none;
}
</style>