如何修改Vuetify 3中多选Select组件的复选框颜色？

在Vuetify 3中使用多选模式的Select组件时，即使给组件设置了color="red"，下拉选项中的复选框仍然显示为黑色，无法通过组件的color属性直接修改。

用户原始代码如下：

HTML 代码 #

<script type="text/x-template" id="app-template">
  <v-app>
    <v-select
      v-model="select"
      :hint="`${select.state}, ${select.abbr}`"
      :items="items"
      item-title="state"
      item-value="abbr"
      label="Select"
      persistent-hint
      return-object
      single-line
      multiple
      color="red"
    ></v-select>
  </v-app>
</script>

<div id="app"></div>

JS 代码 #

const { createApp } = Vue
const { createVuetify } = Vuetify

const vuetify = createVuetify()

const app = createApp({
  template: '#app-template',
  data () {
    return {
      select: { state: 'Florida', abbr: 'FL' },
      items: [
        { state: 'Florida', abbr: 'FL' },
        { state: 'Georgia', abbr: 'GA' },
        { state: 'Nebraska', abbr: 'NE' },
        { state: 'California', abbr: 'CA' },
        { state: 'New York', abbr: 'NY' },
      ],
    }
  },
}).use(vuetify).mount('#app')

解决方案 #

方法一：自定义CSS样式（局部生效） #

通过深度选择器选中复选框元素，修改其颜色样式。在页面中添加以下样式：

<style>
:deep(.v-list-item__checkbox .v-icon) {
  color: red; /* 未选中状态的复选框图标颜色 */
}

:deep(.v-list-item__checkbox--active .v-icon) {
  color: white; /* 选中状态的复选框图标颜色 */
}

:deep(.v-list-item__checkbox--active .v-checkbox__background) {
  background-color: red; /* 选中状态的复选框背景色 */
}
</style>

方法二：修改Vuetify主题配置（全局生效） #

在创建Vuetify实例时，自定义VCheckbox的默认颜色，这样所有多选Select的复选框都会应用该颜色：

const vuetify = createVuetify({
  theme: {
    defaults: {
      VCheckbox: {
        color: 'red',
      },
    },
  },
})

方法三：针对单个组件定制样式 #

如果只想让特定Select组件的复选框变色，可以给组件添加自定义类名，再通过类名限定样式范围：

<v-select
  ...
  class="custom-red-select"
></v-select>

.custom-red-select :deep(.v-list-item__checkbox .v-icon) {
  color: red;
}

.custom-red-select :deep(.v-list-item__checkbox--active .v-icon) {
  color: white;
}

.custom-red-select :deep(.v-list-item__checkbox--active .v-checkbox__background) {
  background-color: red;
}

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