如何在Vuetify 3中无需!important微调组件样式？

需求概述 #

• 调整组件在hover、focus状态下的边框颜色，包含验证错误时的交互样式：
  • 正常hover时边框变为蓝色
  • 组件处于验证错误状态时，hover边框变为绿色
• 同时需要调整其他样式（如按钮高度、圆角等）

过往尝试的问题 #

• 用全局CSS实现时，必须添加!important才能覆盖默认样式，容易造成全局样式污染
• 通过Vuetify的SCSS全局变量配置，仅能修改按钮高度、圆角等基础属性，找不到对应hover/focus/错误状态的顶层配置变量

解决方案 #

方案1：深度选择器（无需全局!important，精准定位） #

利用Vuetify提供的::v-deep深度选择器穿透组件的样式隔离，针对特定组件和状态组合编写样式，避免全局污染：

/* 文本框正常hover状态的边框颜色 */
::v-deep .v-text-field:not(.v-input--has-error):hover .v-input__control {
  border-color: #007bff; /* 蓝色，可自定义色值 */
}

/* 文本框错误状态下hover的边框颜色 */
::v-deep .v-text-field.v-input--has-error:hover .v-input__control {
  border-color: #28a745; /* 绿色，可自定义色值 */
}

/* 文本框focus状态的边框颜色 */
::v-deep .v-text-field:focus-within .v-input__control {
  border-color: #0056b3; /* 深蓝，可自定义色值 */
}

/* 按钮的hover/focus样式示例 */
::v-deep .v-btn:hover {
  border-color: #007bff;
}

说明：不同组件的类名结构有差异，比如按钮的核心类是.v-btn，需要根据实际使用的组件调整选择器结构。

方案2：组件级SCSS变量覆盖（更贴合Vuetify生态） #

Vuetify部分组件暴露了内部的SCSS变量，可针对单个组件引入模块并覆盖变量，避免全局变量的局限性：

/* 针对文本框组件覆盖状态样式变量 */
@use 'vuetify/components/VTextField' with (
  $hover-border-color: #007bff,
  $error-hover-border-color: #28a745,
  $focus-border-color: #0056b3
);

/* 保留你原有的全局样式变量配置 */
@use 'vuetify/settings' with (
  $button-height: 56px,
  $button-font-size: 1.125rem,
  $button-rounded-border-radius: 10px,
  $button-border-radius: 10px,

  $field-border-radius: 10px,
  $field-rounded-border-radius: 10px,
);

说明：并非所有组件都暴露了所有状态变量，若目标组件无对应变量，建议使用方案1。

额外提示 #

如果是自己封装的组件，可以通过给组件添加自定义类名（如custom-input），再针对类名编写样式，进一步提升样式的针对性和可维护性。

内容的提问来源于stack exchange，提问作者Anatoly Lindemann