title: angular material table bg color
body: <p>I have successfully finished creating my first angular material table. I created datasource in component and added it to table and table is rendering properly. But the table is rendering in black color and the text is in white color as shown below</p>
  
  <p><a href="https://i.stack.imgur.com/O6bWg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/O6bWg.png" alt="enter image description here"></a></p>
  
  <p>But I didnt add any styles to list.component.css. styles.css is as shown below</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>/* 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;
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have followed some examples online to accomplish and they are having white bg color and black text. What wrong am I doing here. 
   My questions is since I havent added any styles it should be black &amp; white or it should use theme i configured in styles.css purple-green.css. How do I know what css its being used and how do I stop it or change it. </p>
  
  <p>Below is my html </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h2&gt;Property List&lt;/h2&gt;
  
  &lt;mat-table class="lessons-table mat-elevation-z8" [dataSource]="datasource" &gt;
  
    &lt;!--&lt;ng-container matColumnDef="id"&gt;
      &lt;mat-header-cell *matHeaderCellDef&gt; Id &lt;/mat-header-cell&gt;
      &lt;mat-cell *matCellDef="let property"&gt;
        {{property.id}}
      &lt;/mat-cell&gt;
    &lt;/ng-container&gt;--&gt;
    &lt;ng-container matColumnDef="erfSize"&gt;
      &lt;mat-header-cell *matHeaderCellDef&gt; ERF Size &lt;/mat-header-cell&gt;
      &lt;mat-cell *matCellDef="let property"&gt;
        &lt;a [routerLink]="['/property-edit', property.id]"&gt;{{property.erfSize}}&lt;/a&gt;
      &lt;/mat-cell&gt;
    &lt;/ng-container&gt;
    &lt;ng-container matColumnDef="area"&gt;
      &lt;mat-header-cell *matHeaderCellDef&gt; Area &lt;/mat-header-cell&gt;
      &lt;mat-cell *matCellDef="let property"&gt; {{property.area}} &lt;/mat-cell&gt;
    &lt;/ng-container&gt;
    &lt;ng-container matColumnDef="buildingGLA"&gt;
      &lt;mat-header-cell *matHeaderCellDef&gt; Building GLA &lt;/mat-header-cell&gt;
      &lt;mat-cell *matCellDef="let property"&gt; {{property.buildingGLA}} &lt;/mat-cell&gt;
    &lt;/ng-container&gt;
    &lt;ng-container matColumnDef="buildingGBA"&gt;
      &lt;mat-header-cell *matHeaderCellDef&gt; Building GBA &lt;/mat-header-cell&gt;
      &lt;mat-cell *matCellDef="let property"&gt; {{property.buildingGBA}} &lt;/mat-cell&gt;
    &lt;/ng-container&gt;
    &lt;ng-container matColumnDef="parkingType"&gt;
      &lt;mat-header-cell *matHeaderCellDef&gt; Parking Type &lt;/mat-header-cell&gt;
      &lt;mat-cell *matCellDef="let property"&gt; {{property.parkingType}} &lt;/mat-cell&gt;
    &lt;/ng-container&gt;
    &lt;mat-header-row *matHeaderRowDef="columnsToDisplay"&gt;&lt;/mat-header-row&gt;
    &lt;mat-row *matRowDef="let row; columns: columnsToDisplay;"&gt;&lt;/mat-row&gt;
  
  &lt;/mat-table&gt;</code></pre>
  </div>
  </div>
  </p>