1

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

在此处输入图像描述

但我没有在 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 紫色-绿色.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>

4

1 回答 1

2

Purple-green.scss 中定义了深色主题，这使得文件内部看起来很暗： $theme: mat-dark-theme($primary, $accent);

于 2018-05-15T13:56:50.113 回答