Vuetify 3中修改AppBar汉堡图标及菜单项hover颜色问题

在Vuetify 3项目的AppBar.vue组件中，汉堡图标和菜单项的Hover效果颜色异常深（近乎纯黑），与官方文档显示的默认浅灰色不符，尝试多种CSS选择器、伪选择器（包括!important），甚至用v-hover组件包裹元素均未解决问题。

问题原因 #

出现该问题的常见原因有3种：

• 项目全局样式或自定义SCSS变量覆盖了Vuetify默认的Hover相关样式，且优先级高于组件内置样式
• Vuetify主题配置错误，比如将hover关联的主题色（如surface-variant）误设为深色
• 直接给组件添加自定义类的方式未穿透Vuetify组件的内部DOM结构，导致自定义Hover样式不生效

修复方案 #

1. 修复菜单项Hover样式 #

Vuetify 3的v-list-item的Hover背景由内部元素控制，可通过以下两种方式修复：

方法一：使用深度选择器穿透组件

在组件的<style scoped>标签中添加代码，通过::v-deep穿透到组件内部元素：

/* 直接覆盖v-list-item的Hover状态 */
::v-deep .v-list-item:hover {
  background-color: #f5f5f5 !important; /* 浅灰色，可替换为自定义颜色 */
}

/* 或精准覆盖内部的overlay元素（更贴合Vuetify的结构） */
::v-deep .v-list-item__overlay:hover {
  background-color: rgba(0, 0, 0, 0.04) !important;
}

方法二：通过Vuetify主题变量全局配置

在Vuetify的配置文件（通常为vuetify.ts或plugins/vuetify.js）中，修改主题的全局变量，统一设置菜单项Hover背景：

import { createVuetify } from 'vuetify'

export default createVuetify({
  theme: {
    defaultTheme: 'light',
    themes: {
      light: {
        variables: {
          'v-list-item-hover-bg': '#f5f5f5', // 全局定义菜单项Hover背景色
        },
      },
    },
  },
})

2. 修复汉堡图标（v-app-bar-nav-icon）Hover样式 #

v-app-bar-nav-icon本质是封装后的v-btn组件，需要覆盖按钮的Hover状态：

/* 用深度选择器穿透到内部的v-btn元素 */
::v-deep .v-app-bar-nav-icon .v-btn:hover {
  background-color: rgba(0, 0, 0, 0.04) !important; /* 浅灰色Hover效果 */
}

3. 排查全局样式冲突 #

检查项目中的全局CSS/SCSS文件，是否存在全局Hover样式（如下示例），这类样式会强制覆盖所有元素的Hover效果：

*:hover {
  background-color: #000 !important;
}

如果存在此类代码，需删除或限制其作用范围（比如添加父类选择器）。

注意事项 #

• 尽量避免滥用!important，优先使用深度选择器或主题变量配置，更符合Vuetify的设计规范
• 若使用自定义SCSS变量，需确保变量名不与Vuetify内置变量冲突

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