为什么使用 css-modules 覆盖了我的颜色？答案

【问题标题】：Why is my color being overridden using css-modules?为什么使用 css-modules 覆盖了我的颜色？
【发布时间】：2016-04-05 02:55:30
【问题描述】：

我试图理解为什么我的颜色在我使用css-modules 时会在我的CSS 中被覆盖。这是我的jsx：

let tabLink = className({
    [s.selected]: selectTab
});

<li className={s.tabs}>
    <a className={tabLink}>{tab.translation}</a>
</li>

这里是CSS：

.tabs {
    color: #454545;
}
.tabs li {
    display: inline-block;
    font-size: 11px;
}
.tabs li a {
    color: #454545;
    cursor: pointer;
    text-decoration: none;
}
.selected {
    background: url('../../images/header_nav_on.gif') top left repeat-x;
    color: white;
}

所以当selectTab 为真时，s.selected 将应用于元素。在这种情况下，color 是 white，但它不会应用于元素。在.tab li a 中定义的color 将覆盖它。我必须将!important 添加到white 以使其成为color。我对css 或css-modules 有什么不了解的地方？

【问题讨论】：

标签： css react-jsx css-modules

【解决方案1】：

.tabs li a 比 .selected 更具体。如果您希望.selected 覆盖默认值，请尝试.tabs .selected { background: url('../../images/header_nav_on.gif') top left repeat-x; color: white; }。

您可以使用以下公式计算特异性：id +100，class +10，tag +1。

这使得.tabs li a 值 12 (class(10) + tag(1) + tag(1)) VS .selected，只有 10。如果你改为 .tabs .selected，它将值 20 (class(10) + class(10)) 并将其置于默认值之上。

【讨论】：