Question

我在Angular 8项目中使用Angular材质，并试图在材质卡上设置阴影的设计。我正在按以下说明使用海拔帮助程序mixins：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
}

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

我尚未对其进行测试，但这应该可以工作，因为在使用Angular 7时遇到类似的问题。

为什么只能在组件级CSS上设置垫高程设置？

1 个答案: