<mat-card> 没有凸起 - 没有边框

Question

我有这个简单的 html:

 <mat-card>
    <mat-card-content>
      <code>{{file}}</code>
    </mat-card-content>
 </mat-card>

出于某种原因，当渲染 mat-card 元素时，它没有被提升 - 我希望得到这样的东西：

有谁知道我是否可能遗漏了一些额外的 CSS？没看懂。

Answer 1

我认为你必须在垫卡上添加边距，所以也许

@Component({
  styles: [`

  mat-card { margin:2em;  }

  `]
})

Answer 2

您可能只需要在垫卡中留出空白。

<mat-card style="margin:2em;">
...more code
</mat-card>

这是一个 stackblitz demo

Answer 3

如果您实施了自定义主题，请确保 mat-card 的 parent 应用了此主题。这通常是应用根目录。

我的自定义主题是 rr-theme-light - 所以我必须将这个 class 添加到 mat-card 的 parent 中才能让阴影完全出现。

Answer 4

我的问题是我的 styles.css 中没有重要的主题：

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

<mat-card> is not raised - there is no border