Css-modülleri kullanarak rengin neden kaldırılıyor?

Question

css-modules kullanıyorumken rengin neden benim CSS numaralı telefonumda geçersiz kılındığını anlamaya çalışıyorum.

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

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

Ve burada CSS geçerli:: İşte benim jsx olduğunu selectTab doğru olduğunda

.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; 
} 

Yani, daha sonra s.selected elemana uygulanır. Bu durumda, color, white'dir, ancak öğeye uygulanmaz. .tab li a'da tanımlanmış olan color, onu geçersiz kılar. Ben color olması için white eklemek zorundayım. css veya css-modules hakkında neyi anlamadım?

Answer 1

.tabs li a, .selected'dan daha spesifiktir. Varsayılanın üzerine yazmak için .selected'u istiyorsanız, .tabs .selected { background: url('../../images/header_nav_on.gif') top left repeat-x; color: white; }'u deneyin.

Özgünlüğü hesaplamak için aşağıdaki formülü kullanabilirsiniz: id için +100, sınıf için +10, etiket için +1. yapar

.tabs li a değerinde 12 (sınıf (10) + etiket (1) + etiket (1)) VS .selected, bunu .tabs .selected yerine, buna değecek yaparsanız sadece 10. olan 20 (sınıf (10) + sınıf (10)) ve varsayılan değerin üstüne koyacaktır.