Стиль активной ссылки маршрутизатора VueJS на все элементы внутри маршрутизатора-ссылка

#css #vue.js #vue-router #routerlink

#css #vue.js #vue-маршрутизатор #routerlink

Вопрос:

На моей боковой панели есть некоторые <router-link> , и я хочу, чтобы их стиль отличался, когда они активны. Я использую router active-class для <router-link> , но другие элементы внутри router-link не принимают некоторые свойства css. Вот мой <router-link> внешний вид;

   <router-link tag="li" to="/dashboard" class="nav-item has-treeview" active-class="active">
    <a class="nav-link" id="dashboard_tab">
      <i class="sidebar-icons">dashboard</i>
      <p class="sidebar-links" active-class="active-p">Dashboard</p>
    </a>
  </router-link>
 

И вот мой .active класс;

 .active {
  background-color: #FF7400;
  border-color: #FF7400;
  border-radius: 4px;
  color: white;
}
 

Теперь, когда определенная ссылка нажата и активна, у меня есть оранжевый фон и некоторая граница вокруг этой ссылки маршрутизатора. Но моя проблема в том, что я также хочу, чтобы цвет элемента icon и p элемента был белым, но на них не влияет color: white; свойство. Чего мне не хватает? active-class работает только для router-link элемента, поэтому я не могу использовать его в i or p . Что мне делать?

Комментарии:

1. Попробуйте .active a { color: white }

2. О, вы правы, я этого не пробовал. Спасибо за поддержку!

3. Нет необходимости использовать a тег внутри router-link