vuetify v-selectの選択肢の文字色について

vuetifyのv-selectを用いたときに文字色が変わりません。

以下の公式ドキュメントでは見つかりませんでした。
https://vuetifyjs.com/ja/components/selects

colorというpropsはありますが、これは文字色ではなく、セレクトボックスの色を変えるものでした。

方法をご存知でしたら教えてください。

行動規範の内容に同意します

回答1件

ベストアンサー

class調べたらv-list-item__titleだったのでこういうことかな

html
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8" />
5  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
6  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
7  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
8
9<style>
10/* v-selectの選択肢のクラスのスタイル変更 */
11.v-list-item__title {
12  color: blue;
13}
14</style>
15
16  <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
17  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
18</head>
19<body>
20<div id="app">
21  <v-app>
22    <v-container fluid>
23      <v-select
24        v-model="value"
25        :items="items"
26        label="Select Item"
27        :item-color="'#FF0000'"
28        :color="'#00FF00'"
29        multiple
30      >
31        <template v-slot:selection="{ item, index }">
32          <v-chip v-if="index === 0">
33            <span style="color: red;">{{ item }}</span>
34          </v-chip>
35          <span
36            v-if="index === 1"
37            class="grey--text caption"
38          >(+{{ value.length - 1 }} others)</span>
39        </template>
40      </v-select>
41    </v-container fluid>
42  </v-app>
43</div>
44<script>
45var app = new Vue({
46  el: '#app',
47  vuetify: new Vuetify(),
48  data: () => {
49    return({
50      items: ['foo', 'bar', 'fizz', 'buzz', 'fizzbuzz', 'foobar'],
51      value: ['foo', 'bar', 'fizz'],
52    });
53  }
54});
55</script>
56</body>
57</html>