应用.scs样式来vuetify自定义标记

Question

我的项目中有一个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>

如果我这样做，一切都很顺利，但如果我试图删除这行：

style="height: 300px;"

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

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元素的样式。