CODEWITHSUNDEEP
cssreactjs
user1234SI.
user1234SI.

Reputation: 1869

How can I override css style with className?

I have the following style for my <li> tag inside a .css file: 

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;
}

Now the problem is that I want to add an active class to the current selected <li> using className attribute : 

filteredItem[0].items.forEach((menuItem, index) => {
    menuItems.push(<li key={index} className={`${index === currentPage ? 'active' : ''}`}><span
        className={menuItem.css}/>{menuItem.value}</li>)
});

And the active class style : (inside the same .css file)

.active {
 background-color: #2f89fc;
}

But this doesn't override the original background-color. Any help ?

NOTE: The currentPage variable is working as expected. (tested it with background-color removed from li)

Upvotes: 0

Views: 1166

Answers (1)

Johannes
Johannes

Reputation: 67778

Try to give it a higher specifity:

li.active {
 background-color: #2f89fc;
}

Upvotes: 1

Related Questions