设置 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 文档中找不到任何帮助

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

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

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

注意：我的编辑器自动将“scoped”应用到“style”部分。这让我困惑了一段时间，因为在我删除了作用域关键字之前，CSS 没有任何效果。

编辑：如果您希望保留“范围”样式，替代方法是使用：

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