如何修改v-select组件的标签及下拉选项文本颜色

解决方法 #

Vuetify的v-select的color属性仅控制组件激活状态的主题色，默认不会作用于普通状态的标签文本和下拉选项文字，你可以通过自定义样式+插槽的方式实现需求：

1. 给v-select添加自定义类名 #

修改你的v-select代码，新增class属性方便定向控制样式：

<div id="app">
    <v-app id="inspire">
        <v-container fluid>
            <v-row align="center">
                <v-col
                 class="d-flex"
                 cols="12"
                 sm="6"
                 >
                 <v-select
                 :items="items"
                 label="Standard"
                 background-color="#000000"
                 color="#ffffff"
                 class="custom-black-select"
          ></v-select>
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</div>

2. 添加样式修改文本颜色 #

如果你的style标签加了scoped属性，需要用深度选择器穿透组件样式：

/* 普通状态下的提示label颜色 */
.custom-black-select .v-label {
  color: #ffffff !important;
}
/* 选中后的输入框内文本颜色 */
.custom-black-select .v-select__selection-text {
  color: #ffffff !important;
}
/* 下拉菜单容器背景色，避免白色背景突兀 */
.custom-black-select .v-menu__content {
  background-color: #000000 !important;
}
/* 下拉选项的文本颜色 */
.custom-black-select .v-list-item__title {
  color: #ffffff !important;
}

如果你使用的是Vuetify 2版本，对应调整样式的类名即可：选中值文本对应.v-select__selections，选项文本对应.v-list__tile__title。

如果需要更灵活的自定义选项内容，也可以用item插槽直接控制选项的样式：

<v-select
  :items="items"
  label="Standard"
  background-color="#000000"
  color="#ffffff"
  class="custom-black-select"
>
  <template v-slot:item="{ item }">
    <div class="text-white pa-2">
      {{ item }}
    </div>
  </template>
</v-select>

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