угловой материал стол бг цвет - PullRequest
Новая
       12

угловой материал стол бг цвет

0 голосов
/ 15 мая 2018

Я успешно закончил создание моей первой таблицы угловых материалов. Я создал источник данных в компоненте и добавил его в таблицу, и таблица отображается правильно. Но таблица отображается в черном цвете, а текст - в белом, как показано ниже

enter image description here

Но я не добавил никаких стилей в 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 и черный текст Что я здесь не так делаю? Мои вопросы: поскольку я не добавил ни одного стиля, он должен быть черно-белым или использовать тему, настроенную в файле 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>

1 Ответ

0 голосов
/ 15 мая 2018

есть определение темной темы внутри purple-green.scss, что делает его темным для просмотра в файле: $ theme: mat-dark-theme ($ primary, $ accent);

...