如何覆盖 vuetify 样式？

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

原文由 Weved 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

对我来说，最简单的方法是将我的 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;
}

希望它会帮助别人！

原文由 Alex Bachynskyi 发布，翻译遵循 CC BY-SA 4.0 许可协议