CSS覆盖UI属性 - 有或没有！重要

Question

我想覆盖属于Dropdown

的默认react semantic UI属性

这是我的下拉列表：

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

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

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

我也从Dropdown图标中删除了填充：

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

但是，正如您所看到的那样，只有在我使用!important

时才有效

相关问题：

1. 为什么图标填充只能使用!important - 文字填充不需要!important

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

Answer 1

使用更高的source，例如：

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

  

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

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

  

我听说使用！重要的是不好的做法。我应该避免使用它吗？   所有费用？我怎样才能覆盖这些属性/什么是最好的   做法？

＆＃34; ok＆＃34; 用于轻蔑地覆盖外部库。但是，如果可以通过更高的特异性来覆盖，那么它将更容易调试css冲突/错误。