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