Change style and colors of chips in v-select

Question

How can I change the color and style of chips in v-select?

I have code like this:

<v-select
  v-model="value"
  :items="roles"
  :menu-props="{ top: true, offsetY: true }"
  small-chips
  label="Roles"
  multiple
  hint="Select the role"
  persistent-hint
>
</v-select>

How can I change chips to styled label and color blue?

Answer 1

You probably want the selection slot.

<v-select
  v-model="value"
  :items="roles"
  :menu-props="{ top: true, offsetY: true }"
  small-chips
  label="Roles"
  multiple
  hint="Select the role"
  persistent-hint>
  <template #selection="{ item }">
    <v-chip color="blue">{{item.name}}</v-chip>
  </template>
</v-select>

Where item.name would depend on these individual items of roles.