css - 无法调整 vuetify v-data-table 中的页脚填充

Question

我有一个带有标准分页页脚的非常标准的 veutify v-data-table。我需要偏移页脚项目，使它们不在浮动在它们上方的元素下方。

我试过了：

#table  .v-data-footer {
  padding: 0 100px !important;
}

和

.v-data-footer {
  padding: 0 100px !important;
}

但两种方法都没有奏效。我们使用的是 SCSS 样式，而不是 SASS，所以关于页脚填充的 vue 文档似乎没有帮助。

我有足够的声誉，所以最好的答案将在 48 小时后获得 50 分赏金。

编辑：我正在使用 Vuetify 2.5.6 版

Answer 1

您可以使用深度功能为类添加范围。

::v-deep  .v-data-footer {
  padding: 0 100px;
}

Answer 2

将您的样式更改为padding: 100px 0 !important;. 如果这不起作用，这意味着由于 css 的特殊性，您的样式没有得到更新，您必须增加选择器的特殊性。例如，如果数据表有 id，table-id您可以尝试#table-id.v-data-table .v-data-footer增加特异性。

如果您使用的是旧版本的 Vuetify，那么该类将不是.v-data-footer. 这将是.v-datatable__actions