How can I override css style with className?

Question

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)

Johannes · Accepted Answer · 2020-03-07 16:14:15Z

1

Try to give it a higher specifity:

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

answered Mar 7, 2020 at 16:14

Johannes

67.9k22 gold badges84 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user1234SI. Over a year ago

I want this active class to be usable for more elements.

Johannes Over a year ago

well, if it does work with the li, you could still use a selector like li.active, p.active, div.active { ... } (Depending on the type of elements to which you wanrt to add your class)

user1234SI. Over a year ago

Yes, it works. But it works with "!important" at the end too. Which approach is better?

Johannes Over a year ago

I think the combined selectors are better, without !important . !important should only ever be the last solution if nothing else works. You might want to overwrite that rule in some other situation later on, and then !important is not nice to handle...

user1234SI. Over a year ago

Got it. Thank you.

Collectives™ on Stack Overflow

How can I override css style with className?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related