Why Mat-table looses it styles?

Question

I have created app to load data to a mat table ( angular/material ) but it failed to add styles of the mat-table. At the moment its loads data but CSS formatting is missing

HTML

<mat-table class="mat-elevation-z8" [dataSource]="dataSource">
  
    <ng-container matColumnDef="customerId">
        <div *matHeaderCellDef>customerId</div>
        <div *matCellDef="let row">{{row.customerId}}</div>
    </ng-container>
  
    <ng-container matColumnDef="companyName">
        <div *matHeaderCellDef>companyName</div>
        <div class="companyName-cell"
                  *matCellDef="let row">{{row.companyName}}</div>
    </ng-container>
  
    <ng-container matColumnDef="contactName">
        <div *matHeaderCellDef>contactName</div>
        <div class="contactName-cell"
                  *matCellDef="let row">{{row.contactName}}</div>
    </ng-container>
    
    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    
    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
    
</mat-table>

TS code

import { Component, OnInit } from '@angular/core';

// import { MatInput } from "@angular/material/input";
// import { MatPaginator } from '@angular/material/paginator';
// import { MatProgressSpinner } from '@angular/material/progress-spinner' ;
import { MatSort } from '@angular/material/sort';
import { MatTable } from '@angular/material/table/table';
import { MatTableDataSource } from '@angular/material/table'

import { Customer, DataservicesService } from '../../services/dataservices.service'


@Component({
  selector: 'app-mattable1',
  templateUrl: './mattable1.component.html',
  styleUrls: ['./mattable1.component.css']
})
export class Mattable1Component implements OnInit {

  dataSource: MatTableDataSource<Customer>;
  displayedColumns  = ["customerId","companyName","contactName"];

  constructor(private srv : DataservicesService) { }

  ngOnInit(): void {

       // this.dataSource = new MatTableDataSource(this.getLaps());
       this.dataSource = new MatTableDataSource(); // create new object
      //  this.getLaps(); // forgeted this line
      //  this.dataSource.paginator = this.paginator;
      //  this.dataSource.sort = this.sort;

      this.srv.GetCustomerData().subscribe(d => {
        this.dataSource.data = d;
      });
  }

}

CSS

table {
    width: 800px;
  }
  
  td.mat-column-star {
    width: 20px;
    padding-right: 8px;
  }
  
  th.mat-column-position, td.mat-column-position {
    padding-left: 8px;
  }
  
  .mat-table-sticky-border-elem-right {
    border-left: 1px solid #e0e0e0;
  }
  
  .mat-table-sticky-border-elem-left {
    border-right: 1px solid #e0e0e0;
  }

The rendered Mat-table does not show CSS layouts . How do make it display mat table with columns and data as columns and rows