如何覆盖vuetify样式？

ev7lccsx 于 2023-05-07 发布在 Vue.js

关注(0)|答案(7)|浏览(195)

我想通过类覆盖vuetify样式。
例如，从vuetify更改按钮的背景颜色。
所以，我创建了一个带有class的按钮：

<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

vue.js

来源：https://stackoverflow.com/questions/52310060/how-to-override-vuetify-styles

7条答案

按热度按时间

eblbsuwk1#

使用vue和scoped元素，您将遇到/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>

霍普这个有用

赞(0）回复(0）举报 2023-05-07

xwbd5t1u2#

与Vuetify合作过，它的各种造型...怪癖我相信这一切都归结为编写css，比Vuetify更有针对性。
直接对元素进行样式化（img）从来都不是很好的做法，而是应用自己的类。
这样你就可以声明.my-card.v-card并赢得特殊性战争，同时保持样式的作用域（在vue文件中，非作用域可能是调试的魔鬼）。
一些Vuetify样式声明使用!important ...所以我发现的唯一覆盖这些的方法是在覆盖上使用!important。IMO从Vuetify可怕的决定有 * 任何 * !important风格。
了解>>>, /deep/, ::v-deep也是一件好事，因为它可以提供一个不过滤样式的解决方案。

赞(0）回复(0）举报 2023-05-07

oaxa6hgo3#

尝试不要限定样式的范围，例如：

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

赞(0）回复(0）举报 2023-05-07

mec1mxoz4#

我发现的一个解决方法是通过给包含元素一个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;
}

赞(0）回复(0）举报 2023-05-07

zzwlnbp85#

不知道这是否是/将是一个问题，你有，但我被困在它很长一段时间。
如果你使用限定作用域的样式（你应该这样做），你必须使用深度选择器>>>来定位子组件的类。我从来没有让深度选择器与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）回复(0）举报 2023-05-07

holgip5t6#

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

希望能对某人有所帮助！

赞(0）回复(0）举报 2023-05-07

knpiaxh17#

使用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）回复(0）举报 2023-05-07

我来回答

如何覆盖vuetify样式？

7条答案

相关问题

热门标签

最新问答