vue.js - 验证 : changing min-height of v-application--wrap

Question

我将 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>

Answer 1

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

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