删除 Vuetify v-app-bar 上的默认填充答案

【问题标题】：Removing default padding on Vuetify v-app-bar删除 Vuetify v-app-bar 上的默认填充
【发布时间】：2020-05-16 23:10:40
【问题描述】：

Vuetify v-app-bar 具有默认的 css 类 v-toolbar__content 和 v-toolbar__extension，它们在 x 轴上添加了 16px 填充，在 y 轴上添加了 4px，我想摆脱它们。

我已经尝试在我的 css 中覆盖这些类，如下所示

.v-toolbar__content {
  padding: 0px !important;
}

但它不起作用。有人知道一些技巧可以帮助摆脱v-app-bar 中的填充吗？

【问题讨论】：

【解决方案1】：

在作用域样式中，您不能直接访问子组件。你需要像这样使用深度选择器。

/deep/ .v-toolbar__content {
  padding: 0px !important;
}

或者如果你想使用子选择器来定位，你可以这样做：

.parent-class >>> .v-toolbar__content {
      padding: 0px !important;
}

【讨论】：

【解决方案2】：

我建议修改 vuetify SCSS 变量。根据v-toolbar API我们可以在我们的变量样式文件中修改$toolbar-content-padding-y和$toolbar-content-padding-x。

$toolbar-content-padding-x: 0;
$toolbar-content-padding-y: 0;

如果您还没有配置变量文件，请遵循SASS variables 指南。

【讨论】：