我之前也碰到过类似的问题——Vuetify的列表组件color属性会向下继承样式，导致子列表跟着父列表变背景色，而v-list-item-group的color又只对激活状态生效。不过不用::v-deep穿透也能轻松搞定，给你几个实用方案：

方案1：直接给子列表组加内置背景类/内联样式 #

Vuetify自带一系列背景色工具类，比如bg-white就是纯白色背景，优先级足够覆盖父列表的继承样式。你可以直接给v-list-item-group加上这个类，或者用内联style指定背景色：

<v-list class="criteria-list" style="background-color: #f2f4f7;">
  <v-list-group v-for="criterion in criteria" :key="criterion.name" v-model="criterion.active" no-action >
    <template v-slot:activator>
      <v-list-item-content>
        <v-list-item-title class="text-uppercase" v-text="criterion.name" ></v-list-item-title>
      </v-list-item-content>
    </template>
    <!-- 用内置类设置子列表背景为白色 -->
    <v-list-item-group v-for="attribute in criterion.attributes" :key="attribute.name" multiple active-class="" class="bg-white">
      <v-list-item @click="addFilter(attribute)">
        <template v-slot:default="{ active }">
          <v-list-item-action>
            <v-checkbox :input-value="active"></v-checkbox>
          </v-list-item-action>
          <v-list-item-content>
            <v-list-item-title> {{ attribute.name }} ({{ attribute.count }}) </v-list-item-title>
          </v-list-item-content>
        </template>
      </v-list-item>
    </v-list-item-group>
  </v-list-group>
</v-list>

这里把父列表的color换成了style，因为color属性在Vuetify中会关联主题色逻辑，直接用style设置背景色更直观，避免不必要的样式继承。

方案2：用无框卡片包裹子列表内容 #

如果想要更整洁的结构，可以用<v-card flat>包裹子列表组，flat属性会去掉卡片的边框和阴影，只保留默认白色背景，再配合pa-0/ma-0消除内外边距，让子列表和父列表对齐更自然：

<v-list class="criteria-list" style="background-color: #f2f4f7;">
  <v-list-group v-for="criterion in criteria" :key="criterion.name" v-model="criterion.active" no-action >
    <template v-slot:activator>
      <v-list-item-content>
        <v-list-item-title class="text-uppercase" v-text="criterion.name" ></v-list-item-title>
      </v-list-item-content>
    </template>
    <v-card flat class="pa-0 ma-0">
      <v-list-item-group v-for="attribute in criterion.attributes" :key="attribute.name" multiple active-class="" >
        <v-list-item @click="addFilter(attribute)">
          <template v-slot:default="{ active }">
            <v-list-item-action>
              <v-checkbox :input-value="active"></v-checkbox>
            </v-list-item-action>
            <v-list-item-content>
              <v-list-item-title> {{ attribute.name }} ({{ attribute.count }}) </v-list-item-title>
            </v-list-item-content>
          </template>
        </v-list-item>
      </v-list-item-group>
    </v-card>
  </v-list-group>
</v-list>

方案3：仅给主列表激活器设置背景色 #

如果不想让父列表的背景影响任何子元素，可以把灰色背景只应用在v-list-group的激活器（主列表标题）上，子列表保持默认白色：

<v-list class="criteria-list">
  <v-list-group v-for="criterion in criteria" :key="criterion.name" v-model="criterion.active" no-action >
    <template v-slot:activator>
      <!-- 仅激活器区域用灰色背景 -->
      <v-list-item-content style="background-color: #f2f4f7;">
        <v-list-item-title class="text-uppercase" v-text="criterion.name" ></v-list-item-title>
      </v-list-item-content>
    </template>
    <v-list-item-group v-for="attribute in criterion.attributes" :key="attribute.name" multiple active-class="" >
      <v-list-item @click="addFilter(attribute)">
        <template v-slot:default="{ active }">
          <v-list-item-action>
            <v-checkbox :input-value="active"></v-checkbox>
          </v-list-item-action>
          <v-list-item-content>
            <v-list-item-title> {{ attribute.name }} ({{ attribute.count }}) </v-list-item-title>
          </v-list-item-content>
        </template>
      </v-list-item>
    </v-list-item-group>
  </v-list-group>
</v-list>

以上三种方案都不需要深度穿透样式，完全利用Vuetify内置工具类或内联样式的优先级来隔离背景色，不会产生样式冲突问题。

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