如何局部修改Vuetify输入框的字体大小？

一、正确定位标签的CSS选择器 #

Vuetify的v-text-field组件标签对应的类是.v-label，并非直接用label标签选择器，所以你之前的代码无效。正确写法如下：

/* 调整输入框文本字号 */
.v-text-field input {
    font-size: 10px;
}
/* 调整标签字号 */
.v-text-field .v-label {
    font-size: 8px;
}

如果要避免影响其他带.v-label的组件，可给文本框加自定义类：

<v-text-field 
  class="custom-small-textfield"
  label="Label goes here" 
  model-value="Value goes here"
></v-text-field>

再针对性写样式：

.custom-small-textfield input {
    font-size: 10px;
}
.custom-small-textfield .v-label {
    font-size: 8px;
}

二、scoped样式不生效的原因和解决办法 #

scoped样式仅作用于当前组件的DOM元素，Vuetify组件内部的input、label属于子组件DOM，默认不受当前组件scoped样式影响。解决方式是使用深度选择器：

• Vue 3 + Sass/Less等预处理器，用::v-deep：

::v-deep .v-text-field input {
    font-size: 10px;
}
::v-deep .v-text-field .v-label {
    font-size: 8px;
}

• Vue 2或原生CSS，用>>>：

.v-text-field >>> input {
    font-size: 10px;
}
.v-text-field >>> .v-label {
    font-size: 8px;
}

• 部分预处理器支持/deep/：

/deep/ .v-text-field input {
    font-size: 10px;
}
/deep/ .v-text-field .v-label {
    font-size: 8px;
}

另外，也可把这部分样式写在全局样式文件（比如App.vue的非scoped样式块、单独的全局CSS文件）里，同样能作用到Vuetify组件内部元素，但要注意避免样式污染其他组件。

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