为什么我的颜色被 css-modules 覆盖了？

Question

我想了解为什么在我使用 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 有什么不理解的？

Answer 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)) 并将其置于默认值之上。

为什么我的颜色被 css-modules 覆盖了？

Why is my color being overridden using css-modules?

css

react-jsx

css-modules