[Vuejs]-How to change the style of layout elements for each specific page?

by

0👍

✅

As Iman said in the comments, you can use a scoped style on the page where you have the problem.

Otherwise, another way is to create a dark class that is bind to a var. And you set it to true on the page where you need the black buttons. That way, you can have your style in a global stylesheet.

Something like :

<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>

Leave a comment