I am facing an issue where I need to customize the active state of bootstrap .nav-link in the code snippet below:
<li className="nav-item">
<a
className={`${styles.navLink} nav-link`}
role="tab"
data-toggle="tab"
href="#tab-1"
>
LATEST PRODUCTS
</a>
</li>
Upon inspecting the css in Chrome developer tools, I found the current styles for active .nav-link:
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
color: #495057;
background-color: #fff;
border-color: #dee2e6 #dee2e6 #fff;
}
In Next.js, I'm aware that using .nav-link directly in the CSS file won't work due to camel case restrictions. So I attempted to override the values for .nav-link.active with this CSS, but it's not having any effect:
.tabs .navTabs .navLink.active {
border: 1px solid;
}