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

【问题标题】：Remove Box Shadow from Expandable Data Table in Vuetify从 Vuetify 中的可扩展数据表中删除框阴影
【发布时间】：2021-04-18 08:07:40
【问题描述】：

我似乎无法删除 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>

【问题讨论】：

标签： css vue.js vuejs2 vue-component vuetify.js

【解决方案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;
}

【讨论】：

我尝试了这两个版本，但由于某种原因它仍然无法正常工作:(不过谢谢你，这很有用
给你，证明：codepen.io/sh0ber/pen/gOwBZdN 这是使用文档中的 Vuetify 示例并应用了该样式。
另外，您的<style> 标记具有错误的属性scope。应该是scoped。尝试将其删除。
不客气，我很高兴它有帮助:) 如果您需要保留 scoped 属性，您也可以尝试 >>> 语法，如 this answer。
哦，这是我第一次听说。会做！非常感谢：D

【解决方案2】：

以防万一有人对上述解决方案有疑问，作者：Dan。正如他在评论部分提到的那样，这对我有用。查看他的评论或前往this link了解更多信息。

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

【讨论】：

这对我有用！谢谢