如何用 className 覆盖 css 样式？答案

【问题标题】：How can I override css style with className?如何用 className 覆盖 css 样式？
【发布时间】：2020-03-08 00:16:41
【问题描述】：

我在 .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;
}

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

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 变量按预期工作。（使用从li 中删除的background-color 对其进行测试）

【问题讨论】：

标签： css reactjs

【解决方案1】：

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

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

【讨论】：

我希望这个 active 类可用于更多元素。
好吧，如果它确实与li一起工作，您仍然可以使用li.active, p.active, div.active { ... }之类的选择器（取决于您要添加的元素类型你的班级）
是的，它有效。但它最后也可以与“！important”一起使用。哪种方法更好？
我认为组合选择器更好，没有 !important 。 !important 应该只有在没有其他方法的情况下才是最后的解决方案。您可能希望稍后在其他情况下覆盖该规则，然后 !important 不好处理...
知道了。谢谢。