How to define router-link content color in vue.js
Unfortunately, you can't select a custom Vue.js component using the css selector notation. You can add a class to your router-links and select them using that class name. It's not as convenient as being able to select by element type, but it will work. For example, turn this <router-link to='/seller'>seller</router-link>
into this <router-link to='/seller' class="routerlink">seller</router-link>
. Then in your css, turn this:
& > router-link
display: block
color: rgb(240, 20, 20)
Into this:
& > .routerlink
display: block
color: rgb(240, 20, 20)
See this question for more information: Vue: What is the cleanest way to select a component via CSS?
Related videos on Youtube
stack
Updated on June 04, 2022Comments
-
stack almost 2 years
In my project, I use vue.js of App.vue.
I have defined route-link for goods,ratings,and seller.
And I want to set color of them in style module.
Here is template module of App.vue:
<template> <div id="app"> <v-header></v-header> <div class="tab"> <div class="tab-item"> <router-link to='/'>goods</router-link> </div> <div class="tab-item"> <router-link to='/rating'>ratings</router-link> </div> <div class="tab-item"> <router-link to='/seller'>seller</router-link> </div> </div> <router-view></router-view> </div> </template>
Here is style modual of App.vue.
<style lang="stylus" rel="stylesheet/stylus"> #app .tab display: flex width: 100% height: 40px line-heigh: 40px .tab-item flex: 1 text-align: center & > router-link display: block color: rgb(240, 20, 20) </style>
But i found these definition did not work:
& > router-link display: block color: rgb(240, 20, 20)
In chrome's Elements, I found that:
<route-link to='/'>goods</router-link>
had been changed to
<a href="#/" class="router-link-exact-active router-link-active">goods</a>
When I had tested that a label instead of route-link, it was not OK all the same, like
& > a display: block color: rgb(240, 20, 20)
I don't know why, who can give me a help?
-
stack almost 6 yearsI have tested as you said. But it also does not work.
-
Keara almost 6 yearsCan you post a minimal, complete, verifiable example (just enough code so that if I run it, I get the same problem or error you do?) That way I can try to see what's going on. See stackoverflow.com/help/mcve for how to do this.