<mat-card>没有突起 - 没有边框。

Question

我有这个简单的 HTML：

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

由于某些原因，当 mat-card 元素被渲染时，它并没有被提升 - 我希望能得到像这样的效果：

是否有人知道我是否可能缺少一些额外的 CSS？我不明白。

- user5047085

---

但是mat-card是类吗？我该如何添加正确的CSS？我在这方面还很新手。 - user5047085

不，这是HTML元素。您也可以使用类或ID来完成它。 - brijmcq

您可以在此处查看：https://stackblitz.com/edit/ng-card-niel?file=app%2Fapp.component.html - brijmcq

很高兴能够做到这一点，谢谢你的回报 :) - user5047085

你很棒！ - brijmcq

Answer 1

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

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

- csharpsql

---

尽管 Angular CLI 会询问你需要哪种样式，但我仍需要手动设置… - philthomas26

Answer 2

你可能只需要在 mat-card 中添加一个 margin。

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

这是一个 stackblitz 演示

- brijmcq

---

我还必须添加：border: 1px solid; box-shadow: -1px 1px #77aaff, -2px 2px #77aaff, -3px 3px #77aaff, -4px 4px #77aaff, -5px 5px #77aaff; 根据 https://dev59.com/p2445IYBdhLWcg3w7urD。 - jones-chris

@jones-chris 你有看过这个吗 https://material.angular.io/guide/elevation，你也可以使用类 mat-elevation-z[0-24]，所以可能不需要再添加另一个CSS。 - brijmcq

没有，谢谢提醒！我会尝试一下的 :)。 - jones-chris

我的问题是我在style.css中没有导入'~@angular/material/prebuilt-themes/deeppurple-amber.css'; - RedKlouds

我不能不说感谢并仅仅点赞.. 我尽了最大努力.. 我从未想过这与边距有关，我试图更改我的自定义主题，但感到困惑.. 所以非常感谢！ - ufk

Answer 3

我认为您需要给mat-card添加一个margin，所以也许可以这样做：

@Component({
  styles: [`

  mat-card { margin:2em;  }

  `]
})

- user5047085

---

是的，这个起作用了。为什么这不是默认的CSS，我无法理解。 - user5047085

有一个问题指出，实现边距取决于开发人员：https://github.com/angular/material2/issues/1325 - Edric

Answer 4

如果您已经实现了自定义主题，请确保mat-card的父级应用了这个主题。通常情况下，这是应用的根节点。

我的自定义主题是rr-theme-light - 所以我不得不将这个类添加到mat-card的父级，以便使阴影效果出现。

- Simon_Weaver