Vuetify 主题背景不适用于第二个组件答案

【问题标题】：Vuetify theme background doesn't apply on the second componentVuetify 主题背景不适用于第二个组件
【发布时间】：2021-08-26 20:28:02
【问题描述】：

我正在使用 Vuetify 学习 Vue.js，但组件中的主题有问题。我将我的应用程序作为每个部分构建为一个单独的组件，这些组件在 App.vue 中组合在一起

<template>
  <v-app>
    <NavBar />
    <v-main>
      <Title />
      <About />
    </v-main>
  </v-app>
</template>

<script>
import NavBar from "./components/navbar.vue";
import Title from "./sections/Title.vue";
import About from "./sections/About.vue";

export default {
  name: "App",

  components: {
    NavBar,
    Title,
    About,
  },

  data: () => ({
    //
  }),
};
</script>

NavBar 和 Title 按预期工作。但是关于是白色背景的。我在 vuetify.js 中将主题设置为暗色，因此标题部分的背景为深色，而关于部分的背景为白色。

import Vue from 'vue';
import Vuetify from 'vuetify/lib/framework';

Vue.use(Vuetify);


export default new Vuetify({
    theme: { dark: true },
});

标题及关于vues如下：

Title.vue

<template>
  <v-container id="title" fill-height class="pt-16 mt-16">
    <v-row align="center" class="white--text mx-auto" justify="center">
      <v-col class="white--text text-center" cols="12" tag="h1">
        <Logo />
      </v-col>
    </v-row>
    <v-row justify="center">
      <v-btn
        :ripple="false"
        color="transparent"
        id="no-background-hover"
        elevation="0"
        @click="$vuetify.goTo('#about-me')"
      >
        <v-icon> mdi-chevron-down</v-icon>
      </v-btn>
    </v-row>
  </v-container>
</template>

<script>
import Logo from "../components/logo.vue";

export default {
  name: "Title",
  components: {
    Logo,
  },
};
</script>

<style lang="sass" scoped>
#no-background-hover::before
  background-color: transparent !important
</style>

关于.vue

<template>
  <v-container id="about-me" fill-height class="">
    <v-row>
      <v-col>Hello World</v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "About",
};
</script>

当我切换 Title 和 About 的位置时，About 的背景是深色的，而 Title 的背景是白色的。我希望两者都具有相同的深色背景。怎么了？谢谢！

【问题讨论】：

尝试使用单个<v-container> 并将您的组件放入其中。这可能会有所帮助。
@Chin.Udara 谢谢，它工作。我猜vuetify只能有一个主要的v-container。

标签： css vue.js vue-component themes vuetify.js

【解决方案1】：

@Chin.Udara 提供了帮助。我刚刚在这些部分周围添加了一个 v-container，一切都正确地呈现了主题。但与此同时，填充整个屏幕的部分的填充高度不再起作用，我需要使用带有 height:100vh 的样式 css。

App.vue

<template>
  <v-app>
    <FAButton />
    <NavBar />
    <v-main>
      <v-container>
        <Title />
        <About />
      </v-container>
    </v-main>
  </v-app>
</template>

<script>
import NavBar from "./components/navbar.vue";
import FAButton from "./components/floatingbutton.vue";
import Title from "./sections/Title.vue";
import About from "./sections/About.vue";

export default {
  name: "App",

  components: {
    NavBar,
    FAButton,
    Title,
    About,
  },

  data: () => ({
    //
  }),
};
</script>

Title.vue

<template>
  <v-container id="title" fill-height style="height: 100vh">
    <v-row align="center" justify="center">
      <v-col cols="12">
        <Logo />
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
import Logo from "../components/logo.vue";

export default {
  name: "Title",
  components: {
    Logo,
  },
};
</script>

【讨论】：