Question

我想覆盖属于反应语义UI的默认Dropdown属性

这是我的下拉列表：

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

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

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

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

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

然而，正如你所看到的那样，只有在我使用！important

时才有效

相关问题：

How come the icon padding only works by using !important -- the text padding did not need !important

I hear using !important is bad practice. Should I avoid using it at all costs? How else do I override these properties / What are best practices?

Answer 1

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

这取决于如何在反应语义UI中定义样式，不要忘记，CSS是级联样式表，因此在某些情况下，您需要!impotrant来覆盖样式，其他你不是。例如：

p {
  color: red;
}

p.colored-1 {
  color: blue;
}

p.colored-1 {
  color: green;
}

p {
  color: red;
}

p.colored-2 {
  color: blue !important;
}

p.colored-2 {
  color: green;
}

<p class="colored-1">COLOR</p>
<p class="colored-2">COLOR</p>

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

如果没有必要，请不要使用!important，但如果没有其他方法可以覆盖样式，!important会对您有帮助。

Answer 2

CSS属性具有称为specificity的权力级别。特异性越强，它就越能覆盖其他较弱的定义。因此，反应可能使用强大的特异性，超越了您的定义。使用!important给出了一个非常强的特异性水平，赢得了反应正在使用的水平。查看开发规则中的dev，并在样式表中给出相同或更强的特异性。

例如，设置填充的规则是：

.ui.dropdown .menu>.item

您需要在样式表中自行覆盖该规则，其属性为padding: 0。

这样做会有效，因为您的规则将在Segment UI规则之后加载，从而覆盖它。

认为!important被认为是不好的做法，因为它非常强大而且很难覆盖，如果你将来想这样做的话。有些地方可以使用!important，但事实并非如此......

使用重要

2 个答案: