CSS 覆盖 UI 属性 - 带或不带 ！important

Question

我想覆盖属于react semantic UI的默认Dropdown属性

这是我的下拉菜单：

<Dropdown 
    placeholder="User" 
    selection 
    compact 
    options={userOptions}
/>

我的下拉列表中的文本有太多的填充，所以在我的 CSS 中我像这样删除了它：

.default.text {
    font-size: 10px;
    padding: 0;
}

我也摆脱了下拉菜单图标中的填充：

.dropdown.icon {
    padding: 0 !important;
}

但是，如您所见，这仅在我使用!important时才有效

相关问题：

1. 为什么图标填充只能通过使用!important起作用 - 文本填充不需要!important

2. 我听说使用!important是一种不好的做法。我应该不惜一切代价避免使用它吗？我还能如何覆盖这些属性/什么是最佳实践？

Answer 1

使用更高的 css 规则特异性，例如：

.somegrandparent .someparent .dropdown.icon {
  padding:0;
}

为什么图标填充只能通过使用！important-文本起作用 填充不需要！重要

您的一个规则在没有!important的情况下工作，因为它可能已经具有更高的特异性，而另一个则没有。

我听说使用！important是一种不好的做法。我应该避免在 所有费用？我还能如何覆盖这些属性/什么是最好的 实践？

用于谨慎覆盖外部库是"可以的"。但是，如果可以通过首选的更高特异性来覆盖，因为调试 css 冲突/错误会更容易。