将.scss样式应用于vuetify自定义标记

我的项目中有一个PageHeader.vue文件，其中包括外部PageHeader.scss-file中的样式表：

<template>
  <header>
    <v-toolbar
      app
      flat
      style="height: 300px;">
    </v-toolbar>
    <div id="logo"></div>
  </header>
</template>

<script>
  import './../assets/css/PageHeader.scss'
  export default {
    name: 'PageHeader'
  }
</script>

而是使用my.scss文件中的样式，如下所示：

v-toolbar {
  height: 300px;
}

那么.scss文件中的我的样式不适用。但如果我预先准备好

v形工具栏

使用点符号（将其视为类而不是标记名）效果良好：

.v-toolbar {
  height: 300px;
}

---

但是我在.vue文件中的标记中确实有v-toolbar标记，而不是带有“v-loobar”类名的DIV。是否有任何方法可以像处理常规HTML标记一样使用vuetify自定义标记？

v-toolbar组件将呈现到

<nav class="v-toolbar" ...></nav>

---

因此，您可以使用类似于

nav.v-toolbar{…}

的样式设置

nav

元素的样式。页面的实际html没有

v-toolbar

元素，Vue会根据组件模板将其呈现为html内容。因此，您可以向

v-toolbar

模板添加一个类，但一旦Vue运行，任何地方都没有

v-toolbar

元素。

<nav class="v-toolbar" ...></nav>