logo标签列表

如何覆盖Vuetify样式？

cssvue.jsvuetify.js
24

我想通过类来覆盖 Vuetify 样式。

例如，更改来自 Vuetify 的按钮背景颜色。

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

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

.some {
background-color:red;
}

但是 vuetify 覆盖了背景颜色红色。

如何在不使用 important 和 themes 的情况下解决此问题？

这里是一个示例：https://stackblitz.com/edit/vue-js-gpkj6k

关于 CSS 特定性的问题，可以参考这个链接：https://dev59.com/fq3la4cB1Zd3GeqPM3J1#51728504 最初我标记了一个重复的旗帜，但是那是错误的问题。在之前的问题中只有一部分答案导致了第二个问题。因此，您可以使用 #app .some 来针对它进行目标设置。当然，一旦您学会了这些概念，就可以使用最适合您的方法。 - Traxo
1
可能是Styling Vuetify selectors的重复问题。 - CalvT
8个回答
30

使用Vue和作用域元素，您将遇到/deep/, >>>, ::v-deep选择器。一切都在这里解释说明。因此，如果要深层覆盖样式，也就是根Vuetify组件的子级样式，您需要使用::v-deep选择器以及scoped属性。

这将使您获得：

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

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

希望这能帮助到您。

25

在使用Vuetify及其各种样式“怪癖”时，我认为它所有的问题都归结于编写比Vuetify更具特定性的CSS。

直接给元素（img）应用样式并不是一个好习惯。相反，应该应用自己的类。

这样一来，您可以声明 .my-card.v-card 并赢得特定性战争，同时保持样式的作用范围（在Vue文件中，非作用域样式可能很难调试）。

有些Vuetify样式声明使用了 !important... 所以我发现覆盖这些样式的唯一方法就是在覆盖样式中也使用 !important。 我认为Vuetify决定使用任何一个 !important 样式都是非常糟糕的决策。

了解 >>>, /deep/, ::v-deep 也是很好的，因为这些内容可以提供解决方案，避免样式无法过滤的问题。

7
将Vuetify引入我的项目后，各种样式都被破坏了，即使在管道中将我的样式加载在其后面也是如此。 可能最令人沮丧的问题是，现在所有的input，select和button都没有边框了。 在一个表单密集的应用程序中，为每个元素都添加类很耗时间。 即使将它们添加到<style>标签中也没有帮助。这对开发人员来说非常不友好。 - trpt4him
2
我还养成了一个习惯，即创建全局覆盖样式表，以针对供应商的样式进行定位。因此，不要将其放在组件文件中，而是放在单独的样式表中，然后将其导入到 main.js 中。也就是说...只有当您想要覆盖 所有 的 Vuetify 输入样式时才需要这样做。这样可以避免向 Vuetify 元素添加类等操作。 - 4uroraskye
2
通过定制Vuetify组件的过程 - “赢得特异性战争”是一个形容得非常好的方式，哈哈。 - ego
2
@trpt4him，您可以通过将任何SCSS规则包装在body:not(#_){ ... code here }中来增加其特定性（假设您的<body>元素没有id="_"）。显然，您不需要* per se *使用body，但将:not()的断言限制为尽可能少的元素是一个好习惯。如果您愿意，它是一种自定义的!important，不会越过不能被内联样式覆盖的界限（因此不会破坏JS样式），并且正如您所看到的，它不需要知道任何祖先id或class。 - tao
1
@AlexSorokoletov 哈哈哈，这是非常真实的...为什么呢？有很多方法可以覆盖样式，而不必使用!important。 - 4uroraskye
显示剩余6条评论
5
尽量不要限定你的样式，例如： 

<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>

6
如果你不介意你的样式可能会渗入其他地方，那么这很好。在使用Vue时，我发现最好始终将样式限定在作用域内 - 通常可以找到其他方式来设计元素而不必解除样式作用域。 - 4uroraskye
3

我找到的一个解决方法是通过给包含元素添加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;
}
1

使用 Vuetify 3 时，你会看到一个警告信息：::v-deep usage as a combinator has been deprecated. Use ::v-deep(<inner-selector>) instead 关于::v-deep的用法。其他方法没有任何单个警告，并且无效。

更改样式的方式取决于您是否需要覆盖样式（添加!important;）或仅附加新样式（不需要!important;），这里提供一个示例：

:deep() {
  .v-field__outline__end {
    border-radius: 25px!important;
    color: red;
  }
}
0

不确定这是否/将会是你遇到的问题，但我曾经被卡在这里很长时间。

如果你使用了作用域样式（应该这么做），你将需要使用深度选择器>>>来定位子组件的类。然而，我从未能够让深度选择器与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。
0

对我来说，最简单的方法是添加我的自定义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;
}

希望能对某人有所帮助！

0

htl div

在Vue 3和Vuetify 3中：
<div class="v-responsive v-img" style="width: 85vw;">


div:deep(.v-img) {
  overflow: visible;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接