Блог

Я хотел бы знать, как восстановить стиль NavLink по умолчанию, как указано на скриншоте ниже. Они color должны быть белыми и без подчеркиваний. Вы найдете мой код под скриншотом: Home-это путь по умолчанию, который в данный момент выбран. Свойство activeClass в этом случае работает так, как должно.

Код:

 const NavBar = () =gt; {  return(  lt;div className="navBar"gt;  lt;div className="logo"gt;LOGOlt;/divgt;  lt;div className="navOptions"gt;  lt;ulgt;  lt;ligt;  lt;NavLink exact activeClassName="activeClass" to="/"gt;Homelt;/NavLinkgt;  lt;/ligt;  lt;ligt;  lt;NavLink exact activeClassName="activeClass" to="/advanceFilter"gt;Advanced Searchlt;/NavLinkgt;  lt;/ligt;  lt;ligt;  lt;NavLink exact activeClassName="activeClass" to="viewAll"gt;View Alllt;/NavLinkgt;  lt;/ligt;  lt;ligt;Logoutlt;/ligt;  lt;/ulgt;  lt;/divgt;  lt;/divgt;  ); }  export default NavBar;  

CSS:

 .navBar {  display: flex;  justify-content: space-between;  width: 100%;  height: 100%;  color: white;  font-weight: bold; }  .logo {  display: flex;  flex: 1;  align-items: center;  padding-left: 50px; }  .navOptions {  display: flex;  justify-content: flex-end;  flex: 1;  height: 100%; }  //The li items don't have the color and text-decoration properties on them li {  display: inline;  margin-right: 20px;  cursor: pointer;  height: 100%;  text-decoration: none;  color: white; }  li:hover {  background-color: gray; }  ul {  margin-right: 40px;  list-style-type: none; }  .activeClass {  text-decoration: none;  color: purple; }  

NavLink Компонент отображает lt;a /gt; тег привязки, обновите селектор в CSS, чтобы он также предназначался для тегов привязки, которые являются дочерними элементами li элементов.

 li, li a {  display: inline;  margin-right: 20px;  cursor: pointer;  height: 100%;  text-decoration: none;  color: white; }  

В качестве альтернативы вы также можете указать класс «navlink» и применить там неактивный стиль CSS по умолчанию.