css - 从 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;
}