Question

我想按类覆盖vuetify样式。

例如，从vuetify更改按钮的背景颜色。

因此，我创建了一个带有类的按钮：

<div id="app">
  <v-btn class="some" color="success">Success</v-btn>
</div>

.some {
background-color:red;
}

但是背景色红色被vuetify覆盖。

如何在不使用重要主题的情况下解决此问题？

以下是示例：https://stackblitz.com/edit/vue-js-gpkj6k

Answer 1

使用vue和作用域元素，您将遇到/ deep /，>>>，:: v-deep选择器。 there中的所有内容均已说明。因此，如果您想深层覆盖样式，则意味着您需要使用::v-deep选择器和scoped属性来使用根vuetify组件的子样式。

这给您：

<style scoped>
.parent-element >>> .vuetify-class {
  // values
}
</style>

<style lang="scss" scoped>
  .vuetify-class {
    ::v-deep other-class {
      // your custom css properties
    }
  }
</style>

希望，这会有所帮助。

Answer 2

与Vuetify一起工作过，它的样式多种多样……古怪……我相信这全都归结为编写比Vuetify更具体的CSS。

直接对元素（img）进行样式设置，而不是应用自己的类从来都不是什么好习惯。

通过这种方式，您可以声明.my-card.v-card并赢得专一性战争，同时始终保持样式范围（非范围可以使恶魔在vue文件中调试）。

某些Vuetify样式声明使用!important ...，因此我发现覆盖它们的唯一方法是在覆盖上也使用!important。 Vuetify对IMO具有任何 !important样式的可怕决定。

将注意力放在>>>, /deep/, ::v-deep上也是一件好事，因为它可以提供解决方案，使样式不会被过滤掉。

Answer 3

例如，不要限制样式范围：

<body>
<img :src="userImg" alt="avatar">
</body>

这行不通

<style scoped>
.img {
  width: 120px;
  height: 120px;
  margin: 0 auto;
  border-radius: 50% !important;
  overflow: hidden;
}
.img img {
  width: 100%;
}
</style>

这将起作用

<style>
    .img {
      width: 120px;
      height: 120px;
      margin: 0 auto;
      border-radius: 50% !important;
      overflow: hidden;
    }
    .img img {
      width: 100%;
    }
    </style>

Answer 4

使用index.html中定义的样式，指向元素的直接链接和！important标签。

    <style scoped>
    #app>div>nav>div.something {
       height:70px !important;
    } 
    </style>

您应该很好...

Answer 5

我发现的一种解决方法是，通过为包含的元素提供一个如下所示的ID来专门针对自定义CSS中的元素

<v-btn-toggle
 id="btnGroup"
 borderless
 dense
 group
 class="d-flex flex-column"
>
  <v-btn active-class="dnrSelected">
    <v-icon right class="mr-2">mdi-close</v-icon>
    <span>Do Not Recommend</span>
  </v-btn>
  <v-btn active-class="rSelected">
    <v-icon right class="mr-1">mdi-check</v-icon>
    <span>Recommend</span>
  </v-btn>
  <v-btn active-class="srSelected">
    <v-icon right class="mr-1">mdi-check-all</v-icon>
    <span>Strongly Recommend</span>
  </v-btn>
</v-btn-toggle>

然后使用此id指定如下的目标元素

#btnGroup .dnrSelected {
  background-color: #ef9a9a !important;
}
#recommendationBtnGroup .rSelected {
  background-color: #dcedc8 !important;
}
#recommendationBtnGroup .srSelected {
  background-color: #81c784 !important;
}

Answer 6

不确定这是否是您要解决的问题，但我坚持了很长时间。

如果使用作用域样式（应使用），则必须使用深度选择器>>>来定位子组件的类。不过，我永远无法让深度选择器与SASS一起使用，因此您必须放弃使用SASS或同时使用两者。

<style scoped>
.parent-element >>> .vuetify-class {
  // values
}
</style>

<style lang="scss" scoped>
  // SASS styling
</style>

您可以在此处了解有关深度选择器的信息： https://vue-loader.vuejs.org/guide/scoped-css.html#mixing-local-and-global-styles

Answer 7

对我来说，最简单的方法是将我的custom-reset.css文件添加到修复程序所在的位置。例如，如果您像这样加载vuetify CSS：

import 'vuetify/dist/vuetify.min.css'

您可以在该行之后导入custom-reset.css文件，这样导入的结果将是此行：

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import '<your_path>/custom-reset.css'
import '@mdi/font/css/materialdesignicons.css'

我遇到了问题，发现样式破坏了AdminLte 2样式。就我而言，custom-reset.css文件可能如下所示：

.row {
    display: block;
    margin-right: -15px;
    margin-left: -15px;
}

.row > .col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, 
.col-7, .col-8, .col-9, .col-10, .col-11, .col-12, 
.col-auto, .col-lg, .col-lg-1, .col-lg-2, .col-lg-3, 
.col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, 
.col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-auto, 
.col-md, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, 
.col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, 
.col-md-12, .col-md-auto, .col-sm, .col-sm-1, .col-sm-2, .col-sm-3, 
.col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, 
.col-sm-10, .col-sm-11, .col-sm-12, .col-sm-auto, .col-xl, .col-xl-1, 
.col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, 
.col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-auto {
    padding: 0px 0px 0px 0px;
    padding-right: 15px;
    padding-left: 15px;
}

select {
    -webkit-appearance: menulist; /* -webkit-appearance: none;  */
}
.v-application--wrap {
    min-height: auto;
}

希望它将对某人有所帮助！

如何覆盖Vuetify样式？

7 个答案: