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

Question

我有一个 Nuxt.js 和 Vue.js 项目，其中有一个布局，我的所有登录页面都使用此布局，并且我为此布局中的 v-app-bar 菜单标记提供了一系列样式。但是正如您在经纪人页面上的图片中看到的那样，nav-bar 部分的样式显示正确，这意味着nav-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>

我的 CSS 代码是：

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

Answer 1

正如 Iman 在 cmets 中所说，您可以在出现问题的页面上使用范围样式。

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

类似：

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<v-btn text class="mr-2 font-bold-link-text">Light button</v-btn>
<v-btn text class="mr-2 font-bold-link-text" :class="dark: dark">Dark button</v-btn>
<script>
export default {
  data(){
  return{
    dark: true,
  }
  },
}
</script>
<style scoped>
.font-bold-link-text{
  padding: 8px 16px;
  color: black;
  background: white;
}
.dark{
  padding: 8px 16px;
  color: white;
  background: black;
}
</style>