角材料表bg颜色

Question

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

但我没有向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;
}

我已经在线完成了一些例子，他们有白色bg颜色和黑色文字。我在这做什么错。  我的问题是，因为我没有添加任何样式，它应该是黑色和＆amp;白色或它应该使用styles.css purple-green.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中有暗色主题的定义，使其变暗 查看内部文件： $ theme：mat-dark-theme（$ primary，$ accent）;