Nuxt 和 Vuetify，如何在 v-toolbar 等组件中使用颜色

Question

我正在使用 Nuxt 2 和 Vuetify 2。
我正在尝试创建一个简单的 Vuetify v-toolbar 组件并给它一个颜色。

De 文档告诉我这样做：

<template>
  <v-toolbar flat color="green"> <!-- this does not make the toolbar green! -->
    <v-toolbar-title>
      My title here
    </v-toolbar-title>
  </v-toolbar>
</template>

flat 属性有效，因为它改变了工具栏的外观。

但是，color="green" 属性没有按预期工作。工具栏没有变绿。
在我的浏览器中检查 html 时，我可以看到“绿色”属性作为 class 添加到标记中：

<header 
  data-v-3ece7af3="" 
  data-v-23162205="" 
  class="v-sheet theme--light v-toolbar v-toolbar--flat green" 
  style="height: 64px;">

我按照 Vuetify 文档建议的方式设置了 Nuxt：

// nuxt.config.js
export default {
  buildModules: [
    '@nuxtjs/vuetify'
  ],

  vuetify: {
    customVariables: ['~/assets/variables.scss'],
    treeShake: true
  },
}

// assets/variables.scss
@import '~vuetify/src/styles/styles.sass';

我是不是漏掉了什么明显的东西？

Answer 1

可能您忘记了将组件包裹在 v-app 标签中，这可以解决您的问题。

Nuxt 和 Vuetify，如何在 v-toolbar 等组件中使用颜色

Nuxt and Vuetify, how to use color in components like v-toolbar

sass

vue.js

nuxt.js

vuetify.js