我想按类覆盖 vuetify 样式。
例如从 vuetify 更改按钮的背景颜色。
所以，我创建了一个带有类的按钮：
<div id="app">
<v-btn class="some" color="success">Success</v-btn>
</div>
.some {
background-color:red;
}
但是背景色红色被 vuetify 覆盖了。
如何在不使用重要和主题的情况下解决此问题？
【问题讨论】：
#app .some 来定位它。当然，一旦你了解了这些概念，就使用最适合你的东西。
标签： css vue.js vuetify.js
与 Vuetify 合作过，它的各种样式......怪癖......我相信这一切都归结为编写比 Vuetify 更具特异性的 css。
直接为元素设置样式 (img) 从来都不是很好的做法，而是应用您自己的类。
这样你可以声明 .my-card.v-card 并赢得特异性战争，同时保持样式的范围（非范围可以魔鬼在 vue 文件中调试）。
一些 Vuetify 样式声明使用!important...所以我发现覆盖这些的唯一方法是在覆盖上也使用!important。
Vuetify 做出的 IMO 糟糕决定是 any !important 样式。
了解>>>, /deep/, ::v-deep 也很好，因为它可以提供一个样式不被过滤的解决方案。
【讨论】：
input、select 和button 现在都没有国界了。在表单繁重的应用程序中，为这些元素中的每一个添加类是非常耗时的。即使将其添加到 <style> 标签也无济于事。对开发人员非常不友好。
main.js 的单独样式表中。也就是说...仅当您想覆盖 all vuetify 输入样式时，例如。这样您就可以避免向 vuetify 元素添加类等。
body:not(#_){ ... code here } 中来提高它们的特异性（假设您的 <body> 元素没有 id="_"）。显然，您不需要使用body 本身，但最好将:not() 的断言限制为尽可能少的元素。如果你愿意，它是一个自定义的!important，它不会越过内联样式不可覆盖的界限（因此它不会破坏 JS 样式），并且如您所见，它不需要知道任何祖先id 或 class.
使用 vue 和 scoped 元素，您将遇到 /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>
希望，这会有所帮助。
【讨论】：
例如，尽量不要限定样式：
<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>【讨论】：
我发现的一种解决方法是通过为包含元素提供如下 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;
}
【讨论】：
不确定这是否/将是您遇到的问题，但我被困了很长时间。
如果您使用作用域样式（您应该这样做），则必须使用深度选择器>>> 来定位子组件的类。不过，我永远无法让深度选择器与 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
【讨论】：
对我来说，最简单的方法是将我的 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'
我遇到了问题，vuetify 样式破坏了 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;
}
希望对某人有所帮助！
【讨论】：