以角度在 mat-card 上使用阴影答案

【问题标题】：Using shadow on mat-card in angular以角度在 mat-card 上使用阴影
【发布时间】：2019-10-10 18:19:51
【问题描述】：

我正在开发一个带有棱角前端的项目，我正在尝试为我的一个组件添加阴影，并且已经读到 class="mat-elevation-z8" 应该可以解决问题。但是，它什么也没做。

我的html：

<mat-card class="mat-elevation-z8" style="height: 400px; width: 400px;">
    <mat-card-header>
      <mat-card-title *ngIf="message">{{(message.title | truncateword: 25) | slice:0:30}}</mat-card-title>
      <mat-card-subtitle *ngIf="message">{{message.publishedAt | date}}</mat-card-subtitle>
    </mat-card-header>

  <img *ngIf="image" [src]="image" alt="Here might be a preview image" mat-card-image>

    <mat-card-content>
      <p *ngIf="message">
        {{(message.summary | truncateword:70 | slice:0:73)}}
      </p>
    </mat-card-content>
</mat-card>

另外，我在我的styles.css 中导入~@angular/material/theming，所以这也不应该是问题。这是我的 angular.json 中的样式：

 "styles": [
              "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
              "src/styles.scss"
            ],

有什么想法吗？

【问题讨论】：

标签： html css angular frontend shadow

【解决方案1】：

你应该试一试：

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

【讨论】：

不推荐使用@import。请改用angular.json 的脚本部分。
你能解释一下吗？
我指的是样式部分，而不是脚本部分。 github.com/angular/angular-cli/wiki/… 解释了如何在 Angular 中正确导入样式。当您使用 @import 时，您实际上会在日志中收到有关弃用的警告。
感谢您的提示，但我已经在导入 deeppurple-amber.css。我已经更新了问题
这是 Angular Material 页面上的教程示例angular-material-card-shadow