样式化 vuetify v-data-table

Question

默认情况下，在 v-data-table 的每个非最后一个子行之间打印一行。我想修改 css 以更改该行，例如删除它。最初，在开发者控制台中，关于边框底部的 css 如下所示。

 .theme--light.v-table tbody tr:not(:last-child) {
    border-bottom: 1px solid rgba(0,0,0,0.12);
}

我已经为数据表分配了一个附加类“mytable”：

 <v-data-table
        :headers="headers"
        :items="desserts"
        hide-actions
        class="elevation-1 mytable">
    <template slot="items" slot-scope="props">
        <td>{{ props.item.name }}</td>
        <td class="text-xs-right">{{ props.item.calories }}</td>
        <td class="text-xs-right">{{ props.item.fat }}</td>
        <td class="text-xs-right">{{ props.item.carbs }}</td>
        <td class="text-xs-right">{{ props.item.protein }}</td>
        <td class="text-xs-right">{{ props.item.iron }}</td>
    </template>
</v-data-table>

并且使用 css 我正在尝试修改表格

.mytable table tr {
    background-color: lightgoldenrodyellow;
    border-bottom: none;
}

尽管背景颜色更改为 lightgoldenrodyellow，但仍会打印边框底部。在开发人员控制台中，删除边框底部的指令被划过。背景颜色不是。我必须使用哪个选择器来更改边框底部？使用与主题最初使用的相同的 css 也不起作用。

原文由 Kavau 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我必须使用哪个选择器来更改边框底部？

使用您的自定义类和 vuetify 使用的类

.mytable .v-table tbody tr:not(:last-child) {
    border-bottom: none;
}

此外，您可以添加 .theme--light 如果您想专门设置浅色主题的样式。

代码笔

---

有关样式化 vuetify 组件的更多信息：

CSS 在组件内部不工作（生效）

样式化 Vuetify 选择器

原文由 Traxo 发布，翻译遵循 CC BY-SA 4.0 许可协议