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工具栏

使用点符号（像类一样对待它，而不像标记名一样对待它）效果很好：

.v-toolbar {
  height: 300px;
}

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

Answer 1

v-toolbar组件呈现为

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

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

应用.scss-styles来审核自定义标签

1 个答案: