如何覆盖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中，您可以使用限定范围的样式来确保样式只适用于当前组件。这允许您使用深选择器。

<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>