彩色应用栏完全是白色的 Vuetify

Posted 2023-02-23

【中文标题】彩色应用栏完全是白色的 Vuetify

【英文标题】：Colored App bar comes out completely white Vuetify

【发布时间】：2018-11-07 07:38:03

【问题描述】：

我正在尝试使用此代码加载 Vuetify 应用栏：

<template>
  <v-toolbar dark color="primary">
    <v-toolbar-side-icon></v-toolbar-side-icon>
    <v-toolbar-title class="white--text">Title</v-toolbar-title>
    <v-spacer></v-spacer>
    <v-btn icon>
      <v-icon>search</v-icon>
    </v-btn>
    <v-btn icon>
      <v-icon>apps</v-icon>
    </v-btn>
    <v-btn icon>
      <v-icon>refresh</v-icon>
    </v-btn>
    <v-btn icon>
      <v-icon>more_vert</v-icon>
    </v-btn>
  </v-toolbar>
</template>

使用此代码，我只得到一个白色的空白应用栏。当我突出显示标题文本时，我可以看到它，所以颜色也被设置为白色......

我的 main.js 文件中有这个：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import 'material-design-icons-iconfont/dist/material-design-icons.css' // Ensure you are using css-loader
Vue.config.productionTip = false

Vue.use(Vuetify, 
  theme: 
    primary: '#3f51b5',
    secondary: '#b0bec5',
    accent: '#8c9eff',
    error: '#b71c1c'
  
)

/* eslint-disable no-new */
new Vue(
  el: '#app',
  router,
  components:  App ,
  template: '<App/>'
)

当我删除 dark color="primary" 声明时，我得到一个显示正确的应用栏，只是没有颜色（显然）。

为什么我的颜色没有正确添加？

【参考方案1】：

您需要包裹v-app 以使dark 道具正常工作。

<v-app>
 <v-toolbar dark color="primary">
    <v-toolbar-side-icon></v-toolbar-side-icon>
    <v-toolbar-title>Title</v-toolbar-title>
    <v-spacer></v-spacer>
    <v-btn icon>
      <v-icon>search</v-icon>
    </v-btn>
    <v-btn icon>
      <v-icon>apps</v-icon>
    </v-btn>
    <v-btn icon>
      <v-icon>refresh</v-icon>
    </v-btn>
    <v-btn icon>
      <v-icon>more_vert</v-icon>
    </v-btn>
  </v-toolbar>
 </v-app>

Demo

Vuetify Doc about Light and Dark