在Vuetify v-data-table

Question

我正在尝试将v-data-table中的边框间距更改为：

border-spacing: 0 0.5rem;

我尝试使用CSS设置它：

v-data-table > div > table {
  border-spacing: 0 0.5rem;
}

或

.v-data-table table {
  border-spacing: 0 0.5rem;
}

但是这两个都不起作用。 知道如何更改v-data-table中行之间的空间吗？

Answer 1

您需要使用深CSS选择器>>>将CSS注入到其他组件中。

例如

.a >>> .b { /* ... */ }

将向下编译为

.a[data-v-f3f3eg9] .b { /* ... */ }

所以您可能想做

v-data-table >>> div > table {
  border-spacing: 0 0.5rem;
}