vue.js - 如何覆盖 Vuetify 中的 v-btn 事件类？

Question

我正在使用 Vue.js 2.6.10n 和 Vuetify 2.1.0 和 vue-router 3.1.3 开发一个网站。

我有一个带有 v-btns 的 v-app-bar 链接到我的不同伪页面，并希望在按钮处于事件状态时有一个自定义类，即它链接到当前显示的页面。使用 active-class在 v-btn 中，我可以在 Vuetify 默认的“顶部”添加样式，但不能完全覆盖它。

我怎样才能完全摆脱默认的事件类？

我的目标只是让 btn 文本在事件时加下划线，并摆脱默认的“按下按钮”样式。

这是我的代码示例:

<template>
<v-btn
        to="/"
        active-class="active"
        text
        class=" white--text display-1 logo"
        >HOME</v-btn>
.
.
.
</template>
<style lang="scss" scoped>
.active {
  border-bottom: solid;
  border-color: yellow;
}
</style>

Answer 1

要摆脱 vuetify 组件上按钮按下的事件状态，在此找到答案 github issue :

添加 no-active类到您的组件:

<v-btn active-class="no-active"></v-btn>

或者

<v-chip :to="route" class="no-active">Home</v-chip>

定义样式(如果您的 SFC 样式是范围的，则可能不起作用)

.v-btn--active.no-active::before {
  opacity: 0 !important;
}