设置 Vuetify 应用栏扩展的颜色

Question

我想更改 v-app-bar 扩展的颜色，使其与 v-app-bar 的颜色不同。文档中似乎没有任何内容，但我想这样一个简单的更改不会那么困难，而且很多人都希望进行此更改。我试过用 CSS 改变它，但无济于事。

  <v-app-bar
    app
    extensionHeight="35px"
    class="light-blue darken-4 px-2"
  >

    // This is the part I want to appear a separate color.
    <template 
      v-slot:extension
      class="extension-style"
    >
      <v-tabs align-with-title>
        <v-tab>Browsing History</v-tab>
        <v-tab>Todays Deals</v-tab>
        <v-tab>Your Store</v-tab>
        <v-tab>Gift Cards</v-tab>
        <v-tab>Registry</v-tab>
        <v-tab>Sell</v-tab>
      </v-tabs>
    </template>

  </v-app-bar>

Answer 1

我为此苦苦挣扎了一段时间，但最终通过 CSS 成功地进行了更改，因为我在 Vuetify Docs 中找不到任何帮助

在定义 v-app-bar 的 .vue 文件中，我添加了以下几行：

<style>
div.v-toolbar__extension {
  background-color: green;
}
</style>

我通过 chrome 检查页面确定“div.v-toolbar__extension”是正确的元素，如果您定义了一个类或 id，名称可能不同。

注意：我的编辑器自动将“范围”应用于“样式”部分。这让我有些困惑，因为在我删除 scoped 关键字之前，CSS 没有任何效果。

编辑：如果您希望保留“范围”样式，则可以使用：

<style scoped>
/deep/ div.v-toolbar__extension {
  background-color: green;
}
</style>