My <li> tag in my .css file has the following style:
li {
padding: 15px;
background-color: #32383d;
transition: 0.4s;
border-bottom: 1.5px solid #464e53;
color: #6b6d6d;
font-family: "Poppins", Arial, sans-serif;
cursor: pointer;
}
The issue arises when I try to add an active class to the currently selected <li> using the className attribute:
filteredItem[0].items.forEach((menuItem, index) => {
menuItems.push(<li key={index} className={`${index === currentPage ? 'active' : ''}`}><span
className={menuItem.css}/>{menuItem.value}</li>)
});
This is the style for the active class (located in the same .css file):
.active {
background-color: #2f89fc;
}
However, the new background-color doesn't override the original one. Any advice on how to resolve this issue?
NOTE: The currentPage variable is functioning properly. (verified by removing background-color from li)