css - 应用 .scss-styles 来验证自定义标签

Question

我的元素中有一个 PageHeader.vue 文件，其中包含来自外部 PageHeader.scss 文件的样式表:

<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>

如果我这样做一切顺利，但如果我尝试删除这一行:

style="height: 300px;"

而是像这样在我的 .scss 文件中使用样式:

v-toolbar {
  height: 300px;
}

那么我在 .scss 文件中的样式不适用。但是如果我在前面加上

v-toolbar

使用点符号(将其视为类而不是标签名称)效果很好:

.v-toolbar {
  height: 300px;
}

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

Answer 1

v-toolbar 组件呈现给

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

因此，您可以使用类似 nav.v-toolbar {...} 的样式来设置 nav 元素的样式。