Vuetify 3 在单击或悬停时在按钮、v-menu、v-select 和其他组件上提供深色背景

Question

我正在使用 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

为了临时修复，我更改了叠加层的不透明度，并且背景将不会显示。

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

但是这种情况发生在大多数组件中，并且我在为每个组件添加此类时遇到了麻烦。还有其他人遇到过这个问题吗？

Answer 1

对于那些遇到同样问题的人，答案很可能是您忘记包含

import 'vuetify/styles';

位于 vuetify.ts 文件的顶部。