无法覆盖Vuetify按钮颜色及Hover样式重叠问题求助

问题说明 #

Vue项目中使用Vuetify时，出现两个问题：

1. 自定义的.v-btn颜色样式无法生效，设置的白色文本不显示；
2. 鼠标悬停按钮时，出现未知hover样式与文本重叠。

相关代码 #

组件代码

<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>

Vuetify配置文件（plugins/vuetify.js）

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');

修复方案 #

1. 解决样式覆盖问题 #

Vuetify组件样式优先级高于组件内普通样式，需用深度选择器提升优先级（Vue 3使用:deep()）：

<style scoped>
:deep(.v-btn) {
  cursor: pointer;
  background-color: transparent !important;
  color: white;
}

/* 针对性覆盖hover状态 */
:deep(.v-btn:hover) {
  text-decoration: none;
  background-color: transparent !important;
  color: white;
}
</style>

若未使用scoped样式，直接在全局样式文件（如style.css）中编写代码，优先级更高。

2. 用Vuetify原生方式设置（更推荐） #

无需硬写CSS覆盖，直接利用框架内置属性：

• 给v-btn添加color="white"属性，直接设置文本颜色；
• 若需全局统一按钮样式，可通过主题配置实现：

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

const vuetify = createVuetify({
  components,
  directives,
  theme: {
    themes: {
      light: {
        colors: {
          white: '#FFFFFF',
        },
      },
    },
  },
});

export default vuetify;

组件中直接调用：

<v-btn text color="white" to="/">Main</v-btn>

3. 排查hover样式来源 #

通过浏览器开发者工具（F12）定位：

• 选中按钮元素，开启:hover状态；
• 在样式面板中查看hover样式的类名与来源，针对性编写覆盖样式。

内容的提问来源于stack exchange，提问作者Vadim Yanyushkin