css - 在 Vuetify 中设置事件类的样式

Question

如果我的 v-list-item-group 处于事件状态，我该如何设置它的样式？

<v-list>
   <v-list-item-group v-model="day" color="green">
     <v-list-item v-for="(item, i) in items" :key="i">
        <v-list-item-content>
           <v-list-item-title v-text="item.day"></v-list-item-title>
           <v-list-item-title v-text="item.title"></v-list-item-title>
           <v-list-item-subtitle v-text="item.date"></v-list-item-subtitle>
        </v-list-item-content>
    </v-list-item>
   </v-list-item-group>
</v-list>

我想要这样的东西。

我已经尝试在 css 中设置样式，但它没有任何改变:

.v-list-group-active {
  color: green;
}

Answer 1

选项 1 - 自定义类

一般来说，最好为列表添加一个类(否则这些样式会影响整个页面/站点 v-lists)。

.red_list .v-list-item-group .v-list-item--active{
  background-color: red;
  color: white;
}

片段示例:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    item: 1,
    items: [
      { text: 'Real-Time', icon: 'mdi-clock' },
      { text: 'Audience', icon: 'mdi-account' },
      { text: 'Conversions', icon: 'mdi-flag' },
    ],
  }),
})

.red_list .v-list-item-group .v-list-item--active{
  background-color: red;
  color: white;
}

<link href="https://cdn.jsdelivr.net/npm/vuetify@2.2.20/dist/vuetify.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet"/>


<div id="app">
  <v-app id="inspire">
    <v-card
      class="mx-auto"
      max-width="300"
      tile
    >
      <v-list class="red_list">
        <v-subheader>REPORTS</v-subheader>
        <v-list-item-group v-model="item" color="primary">
          <v-list-item
            v-for="(item, i) in items"
            :key="i"
          >
            <v-list-item-icon>
              <v-icon v-text="item.icon"></v-icon>
            </v-list-item-icon>
            <v-list-item-content>
              <v-list-item-title v-text="item.text"></v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-list-item-group>
      </v-list>
    </v-card>
  </v-app>
</div>

<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.2.20/dist/vuetify.min.js"></script>

选项 2 - 通过 color prop

更多 DRY 方法。

<v-list-item-group v-model="item" color="red">
...rest of the code

Applies specified color to the control - it can be the name of material color (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5)). You can find list of built in classes on the colors page

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    items: [
      {
        icon: 'mdi-inbox',
        text: 'Inbox',
      },
      {
        icon: 'mdi-star',
        text: 'Star',
      },
      {
        icon: 'mdi-send',
        text: 'Send',
      },
      {
        icon: 'mdi-email-open',
        text: 'Drafts',
      },
    ],
    model: 0,
  }),
})

<link href="https://cdn.jsdelivr.net/npm/vuetify@2.2.20/dist/vuetify.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet"/>
<div id="app">
  <v-app id="inspire">
    <v-card
      class="mx-auto"
      max-width="500"
    >
      <v-list>
        <v-list-item-group v-model="model" color="red">
          <v-list-item
            v-for="(item, i) in items"
            :key="i"
          >
            <v-list-item-icon>
              <v-icon v-text="item.icon"></v-icon>
            </v-list-item-icon>
            <v-list-item-content>
              <v-list-item-title v-text="item.text"></v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-list-item-group>
      </v-list>
    </v-card>
  </v-app>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.2.20/dist/vuetify.min.js"></script>