Question

.css文件中的<li>标签具有以下样式：

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

现在的问题是，我想使用active属性将<li>类添加到当前选择的className中：

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

和active类样式：（在同一.css文件中）

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

但这不会覆盖原始的背景颜色。有什么帮助吗？

注意：currentPage变量按预期运行。（已从background-color中删除li进行测试）

Answer 1

尝试赋予其更高的特异性：

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

如何使用className覆盖CSS样式？

1 个答案: