Css覆盖用户界面属性-带或不带！重要 [英] CSS overriding UI properties - with or without !important

问题描述

我要覆盖属于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是不好的做法。我应该不惜一切代价避免使用它吗？我还应该如何重写这些属性/最佳实践是什么？

推荐答案

使用更高的css rule specificity，如：

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

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

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

我听说在用！重要的是不好的练习。我应该避免在以下位置使用它 全部费用吗？我还可以如何覆盖这些属性/哪些是最好的 实践？

可以使用"OK"少量覆盖外部库。但如果可以通过更高的专用性来覆盖，则更好，因为这样会更容易调试CSS冲突/错误。

这篇关于Css覆盖用户界面属性-带或不带！重要的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！