<mat-card>は発生しません-境界線はありません

Question

私はこの単純なhtmlを持っています：

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

なんらかの理由でマットカード要素がレンダリングされても、それは発生しません-私は次のようなものを探しています：

追加のCSSが不足している可能性があるかどうか誰かが知っていますか？わかりません。

Answer 1

おそらくマットカードにマージンが必要です。

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

これがstackblitzです デモ

Answer 2

私の問題は、styles.cssにテーマがインポートされていないことでした。

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

Answer 3

マットカードにマージンを追加する必要があると思うので、多分

@Component({
  styles: [`

  mat-card { margin:2em;  }

  `]
})

Answer 4

カスタムテーマを実装している場合は、mat-cardの親にこのテーマが適用されていることを確認してください。これは通常、アプリのルートになります。

私のカスタムテーマはrr-theme-lightです。そのため、シャドウを表示するには、このクラスをmat-cardの親に追加する必要がありました。