<mat-card>未被提升 - 没有边框

Question

我有这个简单的HTML：

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

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

有没有人知道我是否会遗漏一些额外的CSS？我不明白。

Answer 1

你可能只需要在你的席子卡上留一个保证金。

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

这是一个stackblitz demo

Answer 2

我的问题是我没有在styles.css中导入主题：

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

Answer 3

我认为你必须为mat-card添加一个保证金，所以也许

@Component({
  styles: [`

  mat-card { margin:2em;  }

  `]
})

Answer 4

如果您实现了自定义主题，请确保您的mat-card的父级应用了该主题。通常是应用程序的根目录。

我的自定义主题是rr-theme-light-因此，我不得不将此类添加到mat-card的父级中，以使阴影完全出现。