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

Posted 2023-02-23

【中文标题】Vuetify 主题背景不适用于第二个组件

【英文标题】：Vuetify theme background doesn't apply on the second component

【发布时间】：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。

【参考方案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>