컬러 앱바가 완전히 흰색 Vuetify로 표시됨

컬러 앱바가 완전히 흰색 Vuetify로 표시됨

다음 코드를 사용하여 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"선언합니다. 앱 바가 올바르게 표시됩니다.색깔 없이(분명히) 표시됩니다.

왜 제 색깔이 제대로 추가되지 않는 거죠?

싸야 돼요.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>

데모

명암에 관한 Vuetify 문서

언급URL : https://stackoverflow.com/questions/50570956/colored-app-bar-comes-out-completely-white-vuetify