如何覆盖 vuetify.js 样式

【问题标题】：how to overwrite vuetify.js style如何覆盖 vuetify.js 样式
【发布时间】：2020-06-12 02:41:12
【问题描述】：

我有默认有边框底部的 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;
  }

【问题讨论】：

【解决方案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>

【讨论】：