从 Vuetify 中的可扩展数据表中删除框阴影

Question

我似乎无法删除 Vuetify 中可扩展数据表中的框阴影。我尝试通过添加box-shadow: none甚至使用内联CSS

<style scope>
.v-data-table__expanded .v-data-table__expanded__content {
  box-shadow: none;
}

我还尝试在数据表中使用，elevation="0"希望它能起作用，但无济于事，它仍然不起作用。谁能帮我？

这是目前的样子：

我刚刚使用了 vuetify 中的代码，但为了方便起见，这是代码：

    <div class="my-6">
      <v-text-field
        v-model="search"
        label="Search"
        class="mx-4"
        prepend-inner-icon="mdi-magnify"
        outlined
        dense
        hide-details
      ></v-text-field>
    </div>
    <template>
      <v-data-table
        :headers="dessertHeaders"
        :items="desserts"
        :single-expand="true"
        :expanded.sync="expanded"
        item-key="name"
        dense
        show-expand
        :search="search"
        :custom-filter="filter"
        elevation="0"
      >
        <template v-slot:expanded-item="{ headers, item }" elevation="0">
          <td :colspan="headers.length" elevation="0">More info about {{ item.name }}</td>
        </template>
      </v-data-table>
    </template>

Answer 1

使用以下 CSS：

.v-data-table__expanded.v-data-table__expanded__content {
  box-shadow: none !important;
}

由于这些类位于同一元素上，因此您不希望它们之间有空格，这表示父/（孙）子关系。

这是另一个不需要!important修饰符的选项：

.v-data-table > .v-data-table__wrapper tbody tr.v-data-table__expanded__content {
  box-shadow: none;
}