无法覆盖 Vutify 按钮的颜色

Question

无法覆盖 Vutify 按钮的颜色

<template>
  <v-app-bar app>
    <v-toolbar-title>Найти репетитора</v-toolbar-title>
    <v-spacer></v-spacer>
<v-btn text to="/">Main</v-btn>
<v-btn text to="/coaches">Coaches</v-btn>
<v-btn text to="/register">Register</v-btn>
  </v-app-bar>
</template>

<style>
.v-btn {
        cursor: pointer; 
        background-color: transparent !important; 
        color: white;
   }
</style>>

当我将鼠标悬停在按钮上时，不清楚悬停来自何处并且它与按钮的文本重叠。我该如何修复这个错误？

插件：

import { createVuetify } from 'vuetify';
import * as components from 'vuetify/components';
import * as directives from 'vuetify/directives';

const vuetify = createVuetify({
  components,
  directives,
});

export default vuetify;

main.js

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import vuetify from './plugins/vuetify';

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

Answer 1

如果你想要一个透明背景的按钮：

<v-btn variant="text">Main</v-btn>

代码中的问题是您使用了

text

属性，该属性已在 Vuetify 3 中的

variant="text"

中出现。