1

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.

Taras Kovalenko
  • 2,323
  • 3
  • 24
  • 49
  • Hi, according to the documentation, the use of '/deep/' is deprecated in favor of '::ng-deep': https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep – GeoAstronaute Nov 18 '18 at 13:37

1 Answers1

2

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!

GeoAstronaute
  • 1,751
  • 1
  • 11
  • 12
  • `/deep/` also works fine on `Stackblitz` but it's doesn't work at my app. maybe some issue after automatically migration from 5 into 7 – Taras Kovalenko Nov 18 '18 at 13:59
  • Are you sure that after your migration you still have the use of : `` and not `
    ` ? because in this case you should taget the css class: `.mat-table`.     – GeoAstronaute Nov 18 '18 at 14:00
  • right, mat-table is deprecated on v7 of angular material, but I still can use it. – Taras Kovalenko Nov 18 '18 at 14:01
  • Yes, it still works in v7, but maybe your migration with `ng update` or so, have change your tables. – GeoAstronaute Nov 18 '18 at 14:03
  • the problems not only into tables, but I also can't use shared `CSS` files into my app for different UI component. – Taras Kovalenko Nov 18 '18 at 14:05
  • hmm, ok, I think the best option here is to try to reproduce your issue on Stackblitz, with a more complex example, that uses shared css files, and share it in your question, because I am not sur to fully understand your issue. – GeoAstronaute Nov 18 '18 at 14:13
  • 1
    ok, I have re-created an angular v7 app and just moved my source code from the previous app version and everything work fine. Unfortunately, I'm still don't know why my app doesn't work like expected previously. But issue already solved and this is good =) Thanks. – Taras Kovalenko Nov 18 '18 at 17:03