Vuetify v-app 无法应用类属性答案

【问题标题】：Vuetify v-app can't apply class attributeVuetify v-app 无法应用类属性
【发布时间】：2020-02-23 17:33:17
【问题描述】：

我无法将class="grey lighten-4" 应用于 v-app 标记。甚至颜色属性都不起作用

<template>
  <v-app class="grey lighten-4"> 
    <Navbar />
    <v-content class="mx-4">
      <router-view></router-view>
    </v-content>
  </v-app>
</template>

我想让内容有“灰色变亮4”的颜色，看截图：

【问题讨论】：

看起来它可以正常工作（看看你的导航栏），预期的结果是什么？

标签： javascript css vue.js vuetify.js

【解决方案1】：

我是菜鸟，也有同样的问题。当我将课程应用于v-main 时，它对我有用。它现在没有显示任何错误。


    <template>
      <v-app>
        <v-main class="blue-grey lighten-4">
          <Navbar />
          <router-view></router-view>
        </v-main>
      </v-app>
    </template>

PS：这是我在 Stack Overflow 的第一天。 :)

【讨论】：

【解决方案2】：

您必须移动 v-content 标签中的所有内容，然后更改 v-content 类，如下所示：

<template>
  <v-app>

    <v-content class="grey lighten-4">
      <Navbar />
      <router-view></router-view>
    </v-content>

  </v-app>
</template>

【讨论】：

【解决方案3】：

<template>
  <v-app> 
    <v-container fluid class="grey lighten-4">
      <Navbar />
      <v-content class="mx-4">
        <router-view></router-view>
      </v-content>
    </v-container>
  </v-app>
</template>

【讨论】：

但是容器的高度不是100%

【解决方案4】：

在 App.vue 中使用风格

<style scoped>
.theme--light.v-application {
    background: #F5F5F5;
}
</style>

【讨论】：