修改Vuetify v-text-field标签字号后，如何解决点击后字号跳变问题

问题根源是：自定义样式仅覆盖了v-text-field标签的默认字号，没有处理标签激活状态（输入框获焦/有内容时）的字号规则。Vuetify会给激活的标签添加v-label--active类，默认会缩小字号；当过渡动画结束后，自定义的全局样式优先级覆盖了激活态样式，导致字号跳回初始自定义值。

解决方法1：精准覆盖激活态样式 #

通过CSS选择器同时覆盖默认和激活态的标签样式，确保过渡前后字号规则一致：

/* 默认标签字号 */
.v-label {
  font-size: 18px; /* 替换为你的自定义字号 */
}

/* 激活态标签字号，保持过渡平滑 */
.v-label--active {
  font-size: 14px; /* 激活后想要的字号，可自定义 */
  transition: font-size 0.2s ease;
}

如果是Vue单文件组件的Scoped样式，需要用深度选择器穿透：

::v-deep .v-label {
  font-size: 18px;
}

::v-deep .v-label--active {
  font-size: 14px;
  transition: font-size 0.2s ease;
}

解决方法2：使用Vuetify全局变量（推荐） #

利用Vuetify提供的CSS变量全局修改，避免样式优先级冲突：

:root {
  --v-label-font-size: 18px; /* 默认标签字号 */
  --v-label-active-font-size: 14px; /* 激活态标签字号 */
}

这种方式会自动适配所有v-text-field组件，过渡动画也能正常生效，无需额外处理激活态样式。

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