Добавить интервал между строками в Vuetify v-data-table

Question

Я пытаюсь изменить интервал границы в таблице v-data на:

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