Question

I am trying to understand why my color is being overridden in my CSS when I am using css-modules. Here is my jsx:

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

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

And here is the 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;
}

So when selectTab is true, then s.selected is applied to the element. In that case, color is white, but it is not applied to the element. the color that is defined in .tab li a is overriding it. I am having to add !important to white to make it be the color. What am I not understanding about css or css-modules?

Answer 1

.tabs li a is more specific than .selected. If you want .selected to overwrite the default, try .tabs .selected { background: url('../../images/header_nav_on.gif') top left repeat-x; color: white; }.

You can use the following formula to calculate specificity: +100 for id, +10 for class, +1 for tag.

That makes .tabs li a worth 12 (class(10) + tag(1) + tag(1)) VS .selected, which is only 10. If you make it .tabs .selected instead, it will be worth 20 (class(10) + class(10)) and will put it above the default value.

Why is my color being overridden using css-modules?

1 个答案: