Angular 7 + Angular Material, styleUrls работает не так, как можно было бы ожидать

У меня есть приложение angular 5, и пару дней назад я обновил его до последней версии v7. Конечно, я обновил Angular Material + RxJS.

После этого я вижу много проблем с пользовательским интерфейсом. Например, для v5 я использовал styleUrls для своего компонента и следующий CSS для пользовательского интерфейса для материальных компонентов:

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

Прямо сейчас с v7 это не работает, но если я помещу это CSS в свое представление компонентов, например:

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

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

Все работает нормально, как и ожидалось. Вот почему я думаю, что проблемы с styleUrls, но styles тоже не работает. Я ничего не знаю о том, как это исправить.

Если кто-то знает, как решить эту проблему, пожалуйста, дайте мне знать.

P.S. С v5 все работает нормально, а с v7 не работает.


angular css angular-cli angular-material angular-cli-v7
person Taras Kovalenko    schedule 18.11.2018    source источник
comment
Привет, согласно документации, использование '/deep/' устарело в пользу '::ng-deep': angular.io/guide/component-styles#deprecated-deep--and-ng-deep   -  person GeoAstronaute    schedule 18.11.2018

Ответы (1)


arrow_upward
2
arrow_downward

как сказано в моем комментарии, вы должны использовать ::ng-deep вместо /deep/:Документация. Вот живой пример, который работает с использованием html-элемента mat-table: Stackblitz angular v7.

Надеюсь, поможет!

person GeoAstronaute    schedule 18.11.2018
comment
/deep/ также отлично работает на Stackblitz, но не работает в моем приложении. возможно, какая-то проблема после автоматического перехода с 5 на 7 - person Taras Kovalenko; 18.11.2018
comment
Вы уверены, что после миграции вы все еще используете: <mat-table></mat-table>, а не <table mat-table></table>? потому что в этом случае вы должны выбрать класс css: .mat-table. - person GeoAstronaute; 18.11.2018
comment
правильно, мат-таблица устарела в версии 7 углового материала, но я все еще могу ее использовать. - person Taras Kovalenko; 18.11.2018
comment
Да, это все еще работает в v7, но, возможно, ваша миграция с ng update или около того изменила ваши таблицы. - person GeoAstronaute; 18.11.2018
comment
проблемы не только в таблицах, но я также не могу использовать общие файлы CSS в своем приложении для другого компонента пользовательского интерфейса. - person Taras Kovalenko; 18.11.2018
comment
хм, хорошо, я думаю, что лучший вариант здесь - попытаться воспроизвести вашу проблему на Stackblitz с более сложным примером, в котором используются общие файлы css, и поделиться им в своем вопросе, потому что я не уверен, чтобы полностью понять вашу проблему. - person GeoAstronaute; 18.11.2018
comment
хорошо, я воссоздал приложение angular v7 и просто переместил свой исходный код из предыдущей версии приложения, и все работает нормально. К сожалению, я до сих пор не знаю, почему мое приложение не работает так, как ожидалось ранее. Но проблема уже решена и это хорошо =) Спасибо. - person Taras Kovalenko; 18.11.2018