Angular Material – How to fix: mat-elevation-z doesn’t work with mat-card 

Angular

mat-card is a content container for text, photos, and actions in the context of a single subject.

mat-elevation-z adds shadow to the element.

How to reproduce it

<div class="mat-app-background container">
  <mat-card class="mat-elevation-z8">
    <mat-card-header>
      <app-header></app-header>
    </mat-card-header>
    <mat-card-content>
      <router-outlet></router-outlet>
    </mat-card-content>
  </mat-card>
</div>
mat-card

BUG

.mat-mdc-card overrides .mat-elevation-z

mat-card

Solution

Add mat-mdc-elevation-specific CSS class.

<div class="mat-app-background container">
  <mat-card class="mat-mdc-elevation-specific mat-elevation-z8">
    <mat-card-header>
      <app-header></app-header>
    </mat-card-header>
    <mat-card-content>
      <router-outlet></router-outlet>
    </mat-card-content>
  </mat-card>
</div>
mat-card
https://www.mldgroup.com

Vyštudovaný top manažér pôsobiaci najmä ako manažér, marketér, softvérový inžinier, konzultant, bloger, YouTuber a zatiaľ neúspešný hudobník a producent. V rámci praxe pôsobil v rôznych odvetviach na rôznych pozíciách v malých aj veľkých firmách, vrátane spoluprác a partnerstiev s významnými firmami či poradenskými spoločnosťami.

Pridaj komentár

Vaša e-mailová adresa nebude zverejnená. Vyžadované polia sú označené *