Почему я могу установить настройки высоты мата только на уровне компонентов css?

Question

Я использую материал Angular в своем проекте Angular 8 и пытаюсь настроить дизайн тени на своих карточках материалов. Я использую миксины помощника повышения, как описано здесь: https://material.angular.io/guide/elevation

Вместо того, чтобы настраивать эти повышения в файле CSS каждого компонента, я пытаюсь сделать это на глобальном уровне. Когда я объявляю класс стилей на уровне компонентов, он работает, но когда я объявляю его на глобальном уровне, работает только НЕКОТОРЫЙ из css.

Когда я объявляю класс в глобальном файле styles.css

// styles.scss
@import '~@angular/material/theming';

.card-design {
   border: 1px solid #ff0000; // this IS applied
   @include mat-elevation(8); // this is NOT applied
}  

Когда я объявляю класс на уровне компонента

// nameOfComponent.component.scss
@import '~@angular/material/theming';

.card-design {
   border: 1px solid #ff0000; // this IS applied
   @include mat-elevation(8); // this IS applied
}  

Так как цвет границы применяется, когда я объявляю класс на глобальном уровне, я знаю, что класс применяется правильно, просто то, что высота не применяется или перезаписывается.

Как я могу это исправить?

Answer 1

Попробуйте использовать :host и / или ::ng-deep нравится:

:host ::ng-deep .card-design {
   border: 1px solid #ff0000; // this IS applied
   @include mat-elevation(8); // this is NOT applied
} 

или же

:host .card-design {
   border: 1px solid #ff0000; // this IS applied
   @include mat-elevation(8); // this is NOT applied
} 

Читайте больше о хосте здесь. Похоже, ссылка::nd-deep устарела.

Я не проверял это, но это должно работать, так как я сталкиваюсь с подобными проблемами при работе с Angular 7,