Angular 7 + Angular Material, styleUrls doesn't work as one would expect

Question

I have an angular 5 app and couple a days ago I have updated it to the latest v7. Of course, I have updated Angular Material + RxJS.

After that, I see a lot of UI issues. For example, for v5 I have used styleUrls for my component's and next CSS for cust UI for material components:

:host /deep/ mat-table {
    background: transparent !important;
}

Right now, with v7 it's doesn't work, but if I put this CSS into my component view, for example:

    <style>
        :host /deep/ mat-table {
             background: transparent !important;
         }
    </style>

    ....
<div class="row">
    <div class="col-sm-4">

Everything works fine like expected. That's why I think the problems with styleUrls but styles also doesn't work. I know nothing about how to fix that.

If someone knows how to resolve this issue please let me know.

P.S. With v5 all works fine, but with v7 it's doesn't work.

Answer 1

as said in my comment you should use ::ng-deep instead of /deep/:Documentation. Here is a live example that works with the use of mat-table html element: Stackblitz angular v7.

Hope it helps!