为什么我只能在组件级别 css 设置垫高设置？答案

【问题标题】：Why can I only set mat-elevation settings at the component level css?为什么我只能在组件级别 css 设置垫高设置？
【发布时间】：2019-07-24 16:30:55
【问题描述】：

我在我的 Angular 8 项目中使用 Angular 材质，并尝试在我的材质卡上设置阴影设计。我正在使用此处描述的海拔辅助混合：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
}

由于当我在全局级别声明类时应用了边框颜色，因此我知道该类被正确应用，只是没有应用高程或被覆盖。

我该如何解决这个问题？

【问题讨论】：

标签： css angular angular-material scss-mixins mat-card

【解决方案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
}

Reed 详细了解主持人 here。看起来 ::nd-deep 已被弃用 link。

我没有测试过，但这应该可以工作，因为我在使用 Angular 7 时遇到了类似的问题。

【讨论】：