Использую module.css не знаю как отображать на .active color если он уже есть в родительском теге

<nav className={styles.navbar}>
  <NavLink to="/" end>
    Home
  </NavLink>
  <NavLink to="about">About</NavLink>
  <NavLink to="contacts">Contacts</NavLink>
  <NavLink to="courses">Courses</NavLink>
</nav>



.navbar a {
  margin: 15px;
  font-size: 25px;
  color: rgba(rgb(0, 0, 0), rgb(51, 22, 22), rgb(187, 187, 212), 0.3);
}

.navbar .active {
  color: rgba(rgb(0, 0, 0), rgb(0, 0, 0), blue, 1);
  text-decoration: none;
}

Ответы (1 шт):

Автор решения: Soul Sahee
<NavLink
        className={({ isActive }) => (isActive ? styles.active : styles.link)}
        to="/"
        end
      >

тернарный оператор и разные имена стилей и все работает

→ Ссылка