How to style table

Styles from the material/table package can be customized using the table-overrides mixin. This mixin accepts a set of tokens that control how the components will look, either for the entire app or under a specific selector. For example:
@use '@angular/material' as mat;

// Customize the entire app. Change :root to your selector if you want to scope the styles.
:root {
  @include mat.table-overrides((
    background-color: orange,
    header-headline-color: red,
  ));
}
You can find the full list of supported mixins and tokens below.

Tokens supported by table-overrides

NameTypeBased on system token
row-item-outline-widthBase None
background-colorColor--mat-sys-surface
header-headline-colorColor--mat-sys-on-surface
row-item-label-text-colorColor--mat-sys-on-surface
row-item-outline-colorColor--mat-sys-outline
header-headline-fontTypography--mat-sys-title-small-font
header-headline-line-heightTypography--mat-sys-title-small-line-height
header-headline-sizeTypography--mat-sys-title-small-size
header-headline-weightTypography--mat-sys-title-small-weight
header-headline-trackingTypography--mat-sys-title-small-tracking
row-item-label-text-fontTypography--mat-sys-body-medium-font
row-item-label-text-line-heightTypography--mat-sys-body-medium-line-height
row-item-label-text-sizeTypography--mat-sys-body-medium-size
row-item-label-text-weightTypography--mat-sys-body-medium-weight
row-item-label-text-trackingTypography--mat-sys-body-medium-tracking
footer-supporting-text-fontTypography--mat-sys-body-medium-font
footer-supporting-text-line-heightTypography--mat-sys-body-medium-line-height
footer-supporting-text-sizeTypography--mat-sys-body-medium-size
footer-supporting-text-weightTypography--mat-sys-body-medium-weight
footer-supporting-text-trackingTypography--mat-sys-body-medium-tracking
header-container-heightDensity None
footer-container-heightDensity None
row-item-container-heightDensity None
Azure & Blue theme selected.