angular - 我怎样才能使它只有上面这个标题中的这个“mat-card-subtitle”变成红色？

Question

我学习 Angular 材料，我有这个代码

  <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上面这个标题中的颜色变成红色？

标签： angularangular-material

Answer 1

在 HTML 中添加自定义 CSS 类

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