javascript - Alterar a cor do rótulo com base no evento do mouse e/ou valor booleano

Atualmente, estou tentando mudar a cor de fundo de um rótulo com base em um valor. Ao mesmo tempo, gostaria de mudar a cor do rótulo se o usuário clicar nele ou passar o mouse sobre ele. Atualmente, já fiz o clique e o hover (usando classes CSS separadas), mas não tenho certeza de como fazer a parte do valor funcionar também.

Eu tenho um valor booleano simples (chamado 'displayValueTrueClass') definido como true em um arquivo TypeScript. Se esse valor for true, então eu quero mudar a classe CSS para uma classe 'valueTrue'.

Aqui está meu HTML:

<section class="ac-container">
<div>
    <input id="id-1" name="id-1" type="checkbox" />
    <label [ngClass]="{'valueTrue': displayValueTrueClass}" for="id-1">Panel Name Goes Here</label>
</div>

e aqui está o meu CSS:

.ac-container {
    width: 100%;
    margin: 10px auto 30px auto;
}

.valueTrue {
    background-color: #060bf7;
    color: #ffffff;
}

.ac-container label {
    padding: 4px 20px;
    position: relative;
    display: block;
    height: 25px; 
    cursor: pointer;
    color: #ffffff;
    font-size: 12px;
    background: #404040;
}

.ac-container label:hover {
    background-color: #000000;
}

.ac-container input:checked + label,
.ac-container input:checked + label:hover{
    background-color: #4ed017;
    color: #ffffff;
}

.ac-container label-broken {
    background-color: #ff0000;
    color: #ffffff;
}

Meu TypeScript tem o booleano definido como verdadeiro:

displayValueTrueClass: boolean = true;

Posso confirmar que a linha ngClass realmente exibe usando a classe CSS apropriada, mas somente se eu remover todas as outras classes .ac-container:label, então parece que elas talvez estão tendo precedência sobre a classe valueTrue? Sou relativamente novo em construir HTML com CSS. Tenho quase certeza de que estou usando 'ngClass' corretamente, então não entendo por que a classe apropriada não é aplicada quando esse valor é verdadeiro.

Resposta #1

Como você notou, o seletor CSS .ac-container label tem maior precedência do que o seletor .trueValue. Você pode dar ao seletor .trueValue uma precedência maior tornando-o mais específico:

.ac-container label.trueValue

Ele substituirá o seletor de rótulo padrão quando a classe trueValue for aplicada.

Mais detalhes sobre a especificidade do CSS podem ser encontrados neste artigo.