Как я могу сделать так, чтобы только этот `mat-card-subtitle` в этом заголовке был красного цвета?

Question

Я изучаю угловой материал, и у меня есть этот код

  <mat-card-header>
    <mat-card-title>Search for books</mat-card-title>
    <mat-card-subtitle>press enter on search</mat-card-subtitle>
  </mat-card-header>

и этот css

.mat-card-subtitle {
  font-size: 10px;
  color: red;
}

Проблема теперь в том, что все <mat-card-subtitle> получает красный цвет.Как я могу сделать так, чтобы только mat-card-subtitle в этом заголовке получал красный цвет?

Answer 1

Добавить пользовательский класс CSS в HTML

  <mat-card-header>
    <mat-card-title>Search for books</mat-card-title>
    <mat-card-subtitle class="red-text">press enter on search</mat-card-subtitle>
  </mat-card-header>

CSS

.red-text {
  font-size: 10px;
  color: red !important;
  text-align: center !important;
}

Answer 2

Добавьте класс к субтитру mat-card и задайте цвет для определенного класса

.classname{color:red}