2

我在我的 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
}

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

我怎样才能解决这个问题？

4

1 回答 1

0

尝试使用: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 已被弃用link。

我没有测试过它，但这应该可以工作，因为我在使用Angular 7.

于 2019-07-24T08:30:55.697 回答