问题:Vuetify:更改 v-application--wrap 的最小高度

我使用 vuetify 组件作为页面上的小部件以及小部件之后的另一个内容。但是,我在小部件和页面的其余部分之间有太多可用空间。 vuetify 应用程序占用了太多高度,我不知道如何删除它。

这是它在浏览器中的外观。

我尝试通过以下方式覆盖 App.vue 的 css,但它不起作用。有什么建议么?

<style scoped>
[data-vuetify] {
  overflow-y: hidden;
}
[data-vuetify] .v-application--wrap {
  min-height: 0vh !important;
}
</style>

这是 App.vue 的样子:

<template>
  <div data-vuetify>
    <v-app id="app">
      <router-view></router-view>
    </v-app>
  </div>
</template>

<style scoped>
section {
  margin: 10px 0;
}
[data-vuetify] {
  overflow-y: hidden;
}
[data-vuetify] .v-application--wrap {
  min-height: 0vh !important;
}
</style>

解答

这是对我有用的解决方案。

<style scoped lang="scss">
 ::v-deep .v-application--wrap {
    min-height: fit-content;
  }
</style>