I have these options in the nav bar. Navbar
Since the nav bar background is black, I kept the default font color to be white, and cyan when the route is active.
To achieve this, I wrote the following code:
<a routerLink="/" routerLinkActive="text-cyan-300" [routerLinkActiveOptions]="{exact:true}" class="m-10 hover:text-slate-300 text-white">Home</a>
<a routerLink="/cars" routerLinkActive="text-cyan-300" class="m-10 hover:text-slate-300 text-white">Cars</a>
But the issue is that it is not setting the font color to cyan when the route is active.
On Inspect, I do see that text-cyan gets into the class when the route is active.
Class inspect:
But it does not actually show that in the element.
Style getting cancelled:
As a workaround, I wrapped each anchor tag inside separate divs and added the default styling there.
But I want to know why my previous approach did not work? What's happening behind the scenes that is preventing the application of routerLinkActive styling when the route is active?