vuetify 活动元素突出显示遇到问题

Question

我有一个非常简单的模板

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 验证：3.7.2 vue：12.5.3

Answer 1

错过了

import 'vuetify/styles';

文档没有描述这种导入的必要性，很难找到信息