Angular 15 Material Design table styling not working anymore

I want to style the table rows and cells in an Angular Material Table in Angular.

But the "old" examples with simple css styles don't work anymore in Angular 15:

table {
  width: 100%;
  border-spacing: 0 8px !important;
}

td.mat-cell {
  padding: 16px 0 16px 0;
  border-bottom: 2px solid #ffa600;
  border-top: 2px solid #ffa600;
}

tr.mat-row {
  background: #79a1d8;
}

No matter what styles in the component's css file I use, the table design stays the same.

Here is the basic Table-Example of the Angular Material Design - extended by some styles - with no effects.

https://stackblitz.com/edit/angular-kwfygf?file=src/app/table-basic-example.css

What does Angular changed from older versions like version 8 to the current version 15, that let the table styles fail?

The elements you try to target don't have classes, instead they seem to be having attributes which use different styling syntaxes.

table {
  width: 100%;
  border-spacing: 0 8px !important;
}

td[mat-cell] {
  padding: 16px 0 16px 0;
  border-bottom: 2px solid #ffa600;
  border-top: 2px solid #ffa600;
}

tr[mat-row] {
  background: #79a1d8;
}

This CSS seems to work.

https://stackblitz.com/edit/angular-kwfygf-kdthdr?file=src%2Fapp%2Ftable-basic-example.css

Here is a very small example of the difference in case the link stops working:

<!-- begin snippet: js hide: true console: true babel: false -->

<!-- language: lang-css -->

table {
  width: 100%;
  border-spacing: 0 8px !important;
}


/** Styling for attributes **/

td[mat-cell] {
  padding: 16px 0 16px 0;
  border-bottom: 2px solid orange;
  border-top: 2px solid orange;
}

tr[mat-row] {
  background: skyblue;
}


/** For classes **/

td.mat-cell {
  padding: 16px 0 16px 0;
  border-bottom: 2px solid green;
  border-top: 2px solid green;
}

tr.mat-row {
  background: pink;
}

<!-- language: lang-html -->

<!-- table with attributes -->

<table mat-table>
  <tr mat-row>
    <td mat-cell> Table with attributes </th>
  </tr>
  <tr mat-row>
    <td mat-cell> Name </th>
  </tr>
</table>

<!-- table with classes -->

<table class=mat-table>
  <tr class=mat-row>
    <td class=mat-cell> Table with classes </th>
  </tr>
  <tr class=mat-row>
    <td class=mat-cell> Name </th>
  </tr>
</table>

<!-- end snippet -->