Question

我学习了Angular的材料，并且我有这段代码

areaList: string[] = ['A', 'B', 'C', 'D', 'L', 'T'];
  errors = [
    { id: 'A7', clientName: 'fd', type: 'A' },
    { id: 'B1', clientName: 'sdfdfsu', type: 'B' },
    { id: 'E3', clientName: 'sdf', type: 'C' },
    { id: 'I2', clientName: 'fsdfu', type: 'D' },
    { id: 'L', clientName: 'sdfsf', type: 'L' },
    { id: 'L', clientName: 'sdfsf', type: 'T' }
  ];

和这个CSS

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

问题是，现在所有.mat-card-subtitle { font-size: 10px; color: red; }都变成红色。我该如何做才能使上面标头中的<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-subtitle中添加一个类别，并为特定的类别赋予颜色

.classname{color:red}

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

2 个答案: