Угловой условный класс переопределяется

Question

У меня есть 2 класса CSS, date-today условно применяется к элементу, но не работает, потому что дата переопределяет его.

.date-today {
    color: red;
}

.date {
    color: green;
}

Componenet:

[ngClass]="{ 'date-today': date.isToday() }"

Как я могу заставить класс date-today переопределить date?

Answer 1

Вы можете изменить color: red; на color: red!important;, но, возможно, вы могли бы переместить вашу date настройку класса в [ngClass] и разместить ее в порядке, как показано ниже

[ngClass]="{ 
    'date': !date.isToday(),
    'date date-today': date.isToday()
}"

Answer 2

Вы можете использовать это

<p [class.date]="!today" [class.date-today]="today">
  Start editing to see some magic happen :)
</p>
<button (click)="today = true">today</button>

Answer 3

Изменение порядка правил CSS для предотвращения переопределения (это вызывает specificty)

/*date first*/
.date {
    color: green;
}
/*date-today second*/
.date-today {
    color: red;
}

<div class="date date-today">
date
</div>

Посмотрите, что происходит при изменении порядка правил:

.date-today {
    color: red;
}
.date {
    color: green;
}

<div class="date date-today">
date
</div>