Nuxt3+Vuetify路由激活按钮背景异常tint问题求助

问题 #

基于Nuxt3和Vuetify开发的项目中，顶部导航栏的路由跳转按钮处于当前激活路由状态时，背景会出现无法消除的浅色tint，预期应为透明状态。已尝试设置CSS强制背景透明，但问题仍未解决。

解决方案 #

核心原因 #

1. Vuetify的v-btn组件在激活状态下，内部会生成额外的伪元素或子元素（如v-btn__overlay）实现交互反馈，普通scoped样式无法穿透覆盖这些内部元素
2. 自定义的watch逻辑冗余，未正确利用Nuxt路由的内置状态判断

具体修复步骤 #

1. 使用:deep()穿透scoped样式，强制覆盖Vuetify组件的内部样式
2. 简化路由激活判断逻辑，直接通过route.path对比，无需额外watch
3. 覆盖所有可能产生背景的元素，包括激活状态下的伪元素、overlay和underlay

修改后的代码（components/TopNavbar.vue） #

<template>
    <div>
        <v-app-bar height="125" class="bar">
            <v-row>
                <v-col cols="6" lg="2" xl="2">
                    <v-btn to="/" variant="text">Test</v-btn>
                </v-col>
                <v-col cols="8" align="center">
                    <v-btn
                        to="/"
                        variant="text"
                        class="navButton"
                        :style="{ borderBottom: route.path === '/' ? '2px solid purple' : 'none' }"
                    >Home</v-btn>
                    <v-btn
                        to="/about"
                        variant="text"
                        class="navButton"
                        :style="{ borderBottom: route.path === '/about' ? '2px solid purple' : 'none' }"
                    >About</v-btn>
                </v-col>
            </v-row>
        </v-app-bar>
    </div>
</template>

<script setup>
const route = useRoute()
</script>

<style scoped>
.bar {
    background: black;
    border-bottom: 2px solid purple;
    color: rgb(207, 48, 207);
}

.navButton {
    background-color: transparent !important;
}

/* 穿透覆盖激活状态下的所有背景元素 */
:deep(.navButton.v-btn--active) {
    background-color: transparent !important;
}

:deep(.navButton.v-btn--active::before) {
    background-color: transparent !important;
}

:deep(.navButton .v-btn__overlay),
:deep(.navButton .v-btn__underlay) {
    background-color: transparent !important;
}
</style>

额外优化（可选） #

如果上述样式仍不生效，可以在Vuetify主题配置中直接禁用激活状态的背景色，修改plugins/vuetify.js中的theme配置：

theme: {
    themes: {
        dark: {
            colors: {
                // ... 保留原有颜色配置
                'on-surface-variant': 'transparent', // 覆盖激活状态的背景色
            }
        },
        // light主题可同理设置
    },
    defaultTheme: 'dark'
}

内容的提问来源于stack exchange，提问作者Blake