Javascript 如何更改每个特定页面布局元素的样式？

我有一个Nuxt.js和Vue.js项目，其中有一个布局，我的所有登录页都使用这个布局，我在这个布局中为

v-app-bar

菜单标签提供了一系列样式。但正如您在代理页面的图像中所看到的，导航栏部分的样式显示正确，这意味着导航栏菜单按钮为白色， 但在“如何工作”页面上，菜单的颜色不应为白色，而应改为黑色，以便轻松查看菜单

工作原理第页：

经纪人页面：

主要的工作原理页面，应以相同的方式设计：

我的代码是：

<v-app-bar absolute color="transparent" elevate-on-scroll>
<div class="d-flex align-center">
    <v-img max-width="166"lass="d-flex align-center mr-10" src="/RectangleProfile.png">
    </v-img>
    <v-btn nuxt to="/landing-page/how-it-works" text
     class="mr-2 font-bold-link-text">
       How it Works
    </v-btn>
    <v-btn
     text
     class="mr-2 font-bold-link-text"
     nuxt
     to="/landing-page/list-of-top-brokers"
  >Brokers</v-btn >
  <v-btn text class="mr-2 font-bold-link-text">Tutorial</v-btn>
  <v-btn text class="mr-2 font-bold-link-text">Blogs</v-btn>
  <v-btn text class="mr-2 font-bold-link-text">About us</v-btn>
  <v-btn
     v-if="selectedMagnify === false" icon
     v-on:click.stop="searchSelected()">
    <v-icon color="white">
        mdi-magnify
    </v-icon>
 </v-btn>

 <v-text-field
    v-else
    flat
    color="#ffffff"
    autofocus
    hide-details
    rounded
    height="40"
    filled
    dense
    single-line
    clearable
    placeholder="Search">
 </v-text-field>
</div>
</v-app-bar>

---

正如伊曼在评论中所说，您可以在出现问题的页面上使用范围样式

否则，另一种方法是创建一个绑定到变量的暗类，然后在需要黑色按钮的页面上将其设置为true。这样，您就可以在全局样式表中拥有自己的样式

比如：

灯按钮
暗扣
导出默认值{
数据（）{
返回{
黑暗：是的，
}
},
}
.font粗体链接文本{
填充：8px 16px；
颜色：黑色；
背景：白色；
}
.黑暗{
填充：8px 16px；
颜色：白色；
背景：黑色；
}

我认为您可以使用

样式范围

实现您的目的。另一方面，能否请您分享更多关于

页面

和

布局

以及

组件

的信息？也许你可以使用

v-bin:class

在每一页上显示特定的样式。我按照你说的方式做了，得到了结果，谢谢

.font-bold-link-text {
  font-weight: normal;
  font-size: 14px;
  color: #ffffff !important;
}