样式化材料表以匹配设计

Question

我得到了以下设计：

我有一个物料表，显示需要的信息。但是，我一直无法以与设计相匹配的方式对其进行样式设置。

    <mat-table
  multiTemplateDataRows
  [dataSource]="imagesData"
  class="material-images">
  <ng-container matColumnDef="Image">
    <mat-cell *matCellDef="let element" (click)="imageSelected(element.id)" [attr.rowspan]="3">
      <img src="{{element.url}}" alt="No image found" class="image" style="height: 10rem">
    </mat-cell>
  </ng-container>

  <ng-container matColumnDef="Title">
    <mat-cell *matCellDef="let element">
      <h4 class="leadingLabel">Title: </h4>
      <p class="leadingLabel">{{element.title || 'None'}}</p>
    </mat-cell>
  </ng-container>

  <ng-container matColumnDef="Time">
    <mat-cell *matCellDef="let element">
      <h4>Time: </h4>
      <p>{{element.timestamp || 'None'}}</p>
    </mat-cell>
  </ng-container>

  <ng-container matColumnDef="Created By">
    <mat-cell *matCellDef="let element">
      <h4 class="leadingLabel">Created By: </h4>
      <p class="leadingLabel">{{element.createdBy || 'None'}}</p>
    </mat-cell>
  </ng-container>

  <ng-container matColumnDef="Output">
    <mat-cell *matCellDef="let element">
      <h4>Output: </h4>
      <p>{{element.output || 'None'}}</p>
    </mat-cell>
  </ng-container>

  <ng-container matColumnDef="Description">
    <mat-cell *matCellDef="let element">
      <h4 class="leadingLabel">Description: </h4>
      <p class="leadingLabel">{{element.description || 'None'}}</p>
    </mat-cell>
  </ng-container>

  <mat-row *matRowDef="let row; columns: ['Image','Title', 'Time'];"></mat-row>
  <mat-row *matRowDef="let row; columns: ['Created By', 'Output'];"></mat-row>
  <mat-row *matRowDef="let row; columns: ['Description'];"></mat-row>

</mat-table>

是否有任何CSS专家可以帮助我？老实说，我什至不知道从哪里开始。

Answer 1

为元素添加一个不同的类。

您是否尝试过使用CSS样式（style.css）中的。LeadingLabel {color：red;}。

或

<style>
.leadingLabel{color:red;}
</style>

对不起，如果我不明白您的问题！