Vuetify激活元素高亮异常求助：按钮激活状态被全黑填充

问题 #

我使用以下模板开发：

// main.js
import { createVuetify } from 'vuetify'
import { createApp } from 'vue'
import App from './App.vue'
import * as components from 'vuetify/components'

const vuetify = createVuetify({
    theme: {
        defaultTheme: 'light',
    },
    components,
})

const app = createApp(App);
app.use(vuetify);
app.mount('#app')

<!-- App.vue -->
<template>
  <header>
  </header>

  <main>
    <v-app>
      <v-app-bar >
        <v-app-bar-nav-icon></v-app-bar-nav-icon>
        <v-app-bar-title style="flex: 0;min-width:200px">Horizon Phuket</v-app-bar-title>
        <v-btn >
          Home
        </v-btn>
        <v-btn >
          Best deals
        </v-btn>
        <v-btn>
          test 1
        </v-btn>
        <v-btn>
          test 2
        </v-btn>
      </v-app-bar>
    </v-app>
  </main>
</template>

激活状态的元素会被完全填充为黑色，但相同模板在Vuetify沙箱中显示正常。当前环境版本：VITE v5.4.9、vuetify: 3.7.2、vue: 3.5.12，请问该如何解决此激活元素高亮异常的问题？

解决方案 #

1. 补充导入Vuetify核心样式 #

你的代码仅导入了组件，缺少Vuetify的基础样式文件，这是导致样式异常的核心原因。在main.js顶部添加样式导入：

import 'vuetify/styles' // 新增此行
import { createVuetify } from 'vuetify'
// ... 其余代码保持不变

2. 检查图标样式依赖（若使用图标组件） #

如果项目中用到了v-app-bar-nav-icon这类图标组件，还需导入图标字体和对应的图标集，否则可能连带影响组件样式：

import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import { aliases, mdi } from 'vuetify/iconsets/mdi'
import '@mdi/font/css/materialdesignicons.css' // 导入Material Design图标字体

const vuetify = createVuetify({
    theme: {
        defaultTheme: 'light',
    },
    components,
    icons: {
        defaultSet: 'mdi',
        aliases,
        sets: { mdi }
    }
})

3. 清除Vite缓存并重启服务 #

Vite的缓存可能导致样式未正确更新，执行以下步骤：

• 停止当前开发服务
• 删除项目根目录下的node_modules/.vite文件夹
• 重新运行npm run dev

4. 排查自定义样式冲突 #

检查项目中是否存在全局自定义样式，尤其是:active、.v-btn--active这类选择器，避免使用过于宽泛的规则覆盖Vuetify组件的默认激活样式。

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