Vue.js 带“类”的未知div；v-工具栏“内容”；在浏览器中检查元素时使用html

我试图用类似这样的代码更新其中一个组件（标题）的样式

<template>
 <v-app-bar>
  <v-avatar>
   <v-img />
  </v-avatar>
  <p></p>
  <v-spacer />
  <v-btn></v-btn>
  <v-btn></v-btn>
 </v-app-bar>
<v/template>

当我在浏览器中检查元素时。v类工具栏内容的一个div。突然出现了。如何访问此v形工具栏内容以便更改其CSS

---

v-toolbar_uu内容显示在v-toolbar_uu内容是v-app-bar的一部分之后。 如果您使用Vuetify，您必须先使用v-app将代码包围一圈，然后使用v-main将Vuetify启动。您可以使用样式或css类设置v-app-bar的样式：

<v-app>
  <v-main>
     <v-app-bar style="color: red" class="red-toolbar">
       <v-avatar>
          <v-img />
       </v-avatar>
       <p></p>
       <v-spacer />
       <v-btn></v-btn>
       <v-btn></v-btn>
    </v-app-bar>
  </v-main>
</v-app>

<style scoped>
   .red-toolbar{
      color: red;
   }
</style>

.红色工具栏{
颜色：红色；
}

我猜，当您试图操作

.v-toolbar\u content

类时，您使用的是范围样式

如果是这种情况，操纵类的一种方法是使用深度选择器操纵子组件（请参阅）

下面的语法应该可以工作

<style scoped>
   >>> .v-toolbar__content {
      /* ... */
   }
</style>

>>>.v-工具栏内容{
/* ... */
}

---

（如果您正在使用Sass，请将

>

替换为

：：v-deep

）

欢迎使用StackOverflow。Vuetify是Vue.js组件的集合。依赖Vuetify的源代码在发送到浏览器之前会编译为HTML。这就是为什么在源文件中看不到HTML。您仍然可以在样式块中使用css和.v-toolbar\u内容来设置div的样式（如果您使用的是SFC）。您应该同时查看vuetify和vue.js文档。实际上我已经试过了，以防我可以操纵它，即使它是隐藏的。不幸的是，它不工作。你把它包装在v-app和v-main中了吗？

<style scoped>
   >>> .v-toolbar__content {
      /* ... */
   }
</style>