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

Question

我正在使用 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>

导航栏和标题按预期工作。但是关于是白色背景。我在 vuetify.js 中将主题设置为深色，因此它以深色背景的标题部分和白色背景的关于部分结束。

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

Vue.use(Vuetify);


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

标题及简介如下：

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>

About.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变成白色背景。我希望两者都具有相同的深色背景。怎么了？谢谢！

Answer 1

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

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>

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

Vuetify theme background doesn't apply on the second component

css

themes

vue.js

vue-component

vuetify.js