html - Angular Material 表背景颜色

Question

我已经成功创建了我的第一个 Angular Material 表。我在组件中创建了数据源并将其添加到表中并且表正确呈现。但是表格呈现为黑色，文本呈现为白色，如下所示

但是我没有给 list.component.css 添加任何样式。 styles.css 如下图

/* You can add global styles to this file, and also import other style files */
@import "~@angular/material/prebuilt-themes/purple-green.css";
@import 'https://fonts.googleapis.com/icon?family=Material+Icons';
@import "~bootstrap/dist/css/bootstrap.min.css";
@import "~font-awesome/css/font-awesome.css";

body {
  margin: 0;
  font-family: Roboto, sans-serif;
}

我按照一些在线示例来完成，它们的背景颜色为白色，文本为黑色。我在这里做错了什么。 我的问题是因为我没有添加任何样式，它应该是黑白的或者它应该使用我在 styles.css purple-green.css 中配置的主题。我怎么知道它正在使用什么 css 以及如何停止或更改它。

下面是我的html

<h2>Property List</h2>

<mat-table class="lessons-table mat-elevation-z8" [dataSource]="datasource" >

  <!--<ng-container matColumnDef="id">
    <mat-header-cell *matHeaderCellDef> Id </mat-header-cell>
    <mat-cell *matCellDef="let property">
      {{property.id}}
    </mat-cell>
  </ng-container>-->
  <ng-container matColumnDef="erfSize">
    <mat-header-cell *matHeaderCellDef> ERF Size </mat-header-cell>
    <mat-cell *matCellDef="let property">
      <a [routerLink]="['/property-edit', property.id]">{{property.erfSize}}</a>
    </mat-cell>
  </ng-container>
  <ng-container matColumnDef="area">
    <mat-header-cell *matHeaderCellDef> Area </mat-header-cell>
    <mat-cell *matCellDef="let property"> {{property.area}} </mat-cell>
  </ng-container>
  <ng-container matColumnDef="buildingGLA">
    <mat-header-cell *matHeaderCellDef> Building GLA </mat-header-cell>
    <mat-cell *matCellDef="let property"> {{property.buildingGLA}} </mat-cell>
  </ng-container>
  <ng-container matColumnDef="buildingGBA">
    <mat-header-cell *matHeaderCellDef> Building GBA </mat-header-cell>
    <mat-cell *matCellDef="let property"> {{property.buildingGBA}} </mat-cell>
  </ng-container>
  <ng-container matColumnDef="parkingType">
    <mat-header-cell *matHeaderCellDef> Parking Type </mat-header-cell>
    <mat-cell *matCellDef="let property"> {{property.parkingType}} </mat-cell>
  </ng-container>
  <mat-header-row *matHeaderRowDef="columnsToDisplay"></mat-header-row>
  <mat-row *matRowDef="let row; columns: columnsToDisplay;"></mat-row>

</mat-table>

Answer 1

purple-green.scss 中定义了深色主题，使其变暗 在文件中查找: $主题: 深色主题($primary, $accent);