无法覆盖 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');
如果你想要一个透明背景的按钮:
<v-btn variant="text">Main</v-btn>
代码中的问题是您使用了
text
属性,该属性已在 Vuetify 3 中的 variant="text"
中出现。