Vue3+Vuetify3组件点击/悬浮时出现深色背景问题求助

我在使用Vue ^3.2.13和Vuetify ^3.3.17时，发现v-btn、v-menu、v-select等组件被选中时会出现深色背景（示例效果类似截图中的样式）。

以下是我的vuetify.ts文件内容：

import { createVuetify, ThemeDefinition } from 'vuetify'
import 'vuetify/styles'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/dist/vuetify.min.css'
import { aliases, mdi } from 'vuetify/iconsets/mdi'
import 'vuetify/dist/vuetify-labs.css'

const myCustomLightTheme: ThemeDefinition = {
    dark: false,
    colors: {
        primary: '#1A9CFC',
        secondary: '#EDF7FF',
        error: '#FF2500',
        background: '#FFFFFF',
        surface: '#FFFFFF',
        info: '#2196F3',
        success: '#4CAF50',
        warning: '#FB8C00',
    },
}

const vuetify = createVuetify({
    components,
    directives,
    icons: {
        defaultSet: 'mdi',
        aliases,
        sets: {
            mdi,
        },
    },
    defaults: {
        VBtn: {
            style: 'text-transform: none;',
        },
        global: {
            ripple: false,
            attach: '#admin',
        },
    },
    theme: {
        defaultTheme: 'myCustomLightTheme',
        themes: {
            myCustomLightTheme,
        },
    },
})

export default vuetify

我目前的临时修复方式是通过修改overlay的样式来隐藏深色背景：

::v-deep {
    .v-btn__overlay {
        opacity: 0 !important;
        visibility: hidden !important;
        background: transparent !important;
    }
}

但这个问题出现在大多数组件中，逐个添加样式太繁琐，想问问有没有其他用户遇到过类似问题，或者有没有更通用的解决方案？

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