VueJS Router Active Link Style to all elements inside the router-link

Question

In my sidebar, there are some <router-link>and I want their style is to be different when they are active. I am using router active-class for the <router-link> but the other elements inside the router-link are not taking some css properties. Here is my <router-link> looks like;

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

And here is my .active class;

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

Now when a specific link is clicked and active, I have orange background and some border around that router-link. But my problem is, I also want the color of the icon and the p element is to be white, but they are not being effected by the color: white; property. What am I missing? active-class is only working for the router-link element so I cannot use it in the i or p. What should i do?