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

【问题标题】：<mat-card> is not raised - there is no border<mat-card> 没有凸起 - 没有边框
【发布时间】：2018-06-15 23:27:33
【问题描述】：

我有这个简单的 html：

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

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

有人知道我是否会遗漏一些额外的 CSS 吗？没看懂。

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

您可能只需要在您的 mat-card 中留出一个边距。

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

这是一个堆栈闪电战demo

【讨论】：

我还必须添加：border: 1px solid; box-shadow: -1px 1px #77aaff, -2px 2px #77aaff, -3px 3px #77aaff, -4px 4px #77aaff, -5px 5px #77aaff; per stackoverflow.com/questions/4620239/…
@jones-chris 你检查过这个material.angular.io/guide/elevation，你也可以使用类mat-elevation-z[0-24]，所以可能不需要像上面那样添加另一个css
不，我没有。感谢您提及！我会试一试:)。
我的问题是我没有@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';在我的 style.css 中

【解决方案3】：

我认为您必须在 mat-card 上添加一个边距，所以也许

@Component({
  styles: [`

  mat-card { margin:2em;  }

  `]
})

【讨论】：

【解决方案4】：

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

我的自定义主题是 rr-theme-light - 所以我必须将这个类添加到 mat-card 的父类中才能完全显示阴影。

【讨论】：