如何覆盖 vuetify 样式？
Posted
技术标签:
【中文标题】如何覆盖 vuetify 样式？【英文标题】：How to override vuetify styles? 【发布时间】：2019-02-17 23:21:54 【问题描述】：我想按类覆盖 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
【问题讨论】：
实际上看到了这个关于 CSS 的特殊性：***.com/questions/51717264/styling-vuetify-selectors/… 我最初放了一个重复的标志，但是错误的问题。在前一个问题中，只有部分答案导致了第二个问题。因此，例如，您可以使用#app .some 来定位它。当然，一旦你了解了这些概念，就使用最适合你的东西。
Styling Vuetify selectors的可能重复
【参考方案1】：
与 Vuetify 合作过，它的各种样式......怪癖......我相信这一切都归结为编写比 Vuetify 更具特异性的 css。
直接为元素设置样式 (img) 从来都不是很好的做法，而是应用您自己的类。
这样你可以声明 .my-card.v-card 并赢得特异性战争，同时保持样式的范围（非范围可以魔鬼在 vue 文件中调试）。
一些 Vuetify 样式声明使用!important...所以我发现覆盖这些的唯一方法是在覆盖上也使用!important。
Vuetify 做出的 IMO 糟糕决定是 any !important 样式。
了解>>>, /deep/, ::v-deep 也很好，因为它可以提供一个样式不被过滤的解决方案。
【讨论】：
仅仅将 Vuetify 引入我的项目就破坏了各种样式，即使我在管道中加载了我的样式。也许最令人沮丧的是input、select 和button 现在都没有国界了。在表单繁重的应用程序中，为这些元素中的每一个添加类是非常耗时的。即使将其添加到 <style> 标签也无济于事。对开发人员非常不友好。
我还养成了使用全局覆盖样式表的习惯，以供应商样式为目标。因此，不是在您的组件文件中，而是在您将导入到main.js 的单独样式表中。也就是说...仅当您想覆盖 all vuetify 输入样式时，例如。这样您就可以避免向 vuetify 元素添加类等。
经历自定义 vuetify 组件的过程 - `赢得特异性战争`是一个很好的描述方式哈哈
@trpt4him，您可以通过将任何 SCSS 规则包装在 body:not(#_) ... code here 中来提高它们的特异性（假设您的 <body> 元素没有 id="_"）。显然，您不需要使用body 本身，但最好将:not() 的断言限制为尽可能少的元素。如果你愿意，它是一个自定义的!important，它不会越过内联样式不可覆盖的界限（因此它不会破坏 JS 样式），并且如您所见，它不需要知道任何祖先id 或 class.
加 1 只是为了“……怪癖……”。让我开心，因为它是如此真实【参考方案2】：
使用 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>
希望，这会有所帮助。
【讨论】：
【参考方案3】：例如，尽量不要限定样式：
<body>
<img :src="userImg" >
</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>【讨论】：
这很好，如果您不介意您的样式可能会渗入其他地方。我发现在使用 Vue 时最好始终设置样式范围——通常还有另一种方法可以绕过样式元素而不诉诸取消范围样式。【参考方案4】：我发现的一种解决方法是通过为包含元素提供如下 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;
【讨论】：
【参考方案5】：不确定这是否/将是您遇到的问题，但我被困了很长时间。
如果您使用作用域样式（您应该这样做），则必须使用深度选择器>>> 来定位子组件的类。不过，我永远无法让深度选择器与 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
【讨论】：
【参考方案6】：对我来说，最简单的方法是将我的 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;
希望对某人有所帮助！
【讨论】：
以上是关于如何覆盖 vuetify 样式？的主要内容，如果未能解决你的问题，请参考以下文章