components: bug(mat-card): mat-elevation-zx no longer working for mat-card after upgrade to version 15

Is this a regression?

  • Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

14

Description

I have some mat-cards with specific elevations set, like for example: class=mat-elevation-z4 After the upgrade from 14 to 15, the cards are no longer affected by any mat-elevation classes I add.

Reproduction

Steps to reproduce:

  1. in a template, use <mat-card class="mat-elevation-z8">test</mat-card>
  2. notice that the elevation helper class has no effect on the mat-card’s elevation

Expected Behavior

Expecting the mat-elevation-z_x_ classes to modify the mat-card’s elevation.

Actual Behavior

elevation is not affected by adding, for example, class="mat-elevation-z8"

Environment

  • Angular: 15.0.0
  • CDK/Material: 15.0.0
  • Browser(s): Edge/Chrome
  • Operating System (e.g. Windows, macOS, Ubuntu): Windows

About this issue

  • Original URL
  • State: open
  • Created 2 years ago
  • Reactions: 15
  • Comments: 32 (2 by maintainers)

Commits related to this issue

Most upvoted comments

In that spirit, this should re-create all of them.

@for $i from 0 through 24 {
  .mat-mdc-card.mat-elevation-z#{$i} {
    @include mat.elevation($i);
  }
}

I am using Angular Material ^15.2.6, and I do have an extra class called mat-mdc-elevation-specific added automatically to the card. So a workaround can be that you add this class to the mat-card as well (gives specificity boost 😃

<mat-card class="mat-mdc-elevation-specific mat-elevation-z4">
...

A workaround until better comes up.

Any news on this, it has been opened for more than 2 months. I would rather not implement a workaround.

Adding these lines in global-css worked for me (workaround)

.mat-mdc-card.mat-elevation-z6 {
  @include mat.elevation(6);
}

.mat-mdc-card.mat-elevation-z8 {
  @include mat.elevation(8);
}

.mat-mdc-card.mat-elevation-z10 {
  @include mat.elevation(10);
}

// add more mat-elevations that are needed...

Version: @angular/material: 15.2.4

Doesnt work in 16.0.1

u got it, it is a crazy workaround, until someone in google figured out a fix.

confirmed: https://stackblitz.com/edit/angular-v7wcjs?file=src%2Fmain.ts

notice, that @includes with elevation helpers does not work on mat-card, too:

mat-card {
  @include mat.elevation(8);
}

This is working. mat-card-content class=“mat-elevation-z8”

Use mat-card-content tag.

WORKS! THANK YOU SO MUCH!

Still not working “@angular/material”: “^15.2.3”,

That doesn’t really give desired results… (should be the whole card)

image

It won’t be fixed for 15.1.0.

Adding these lines in global-css worked for me (workaround)

.mat-mdc-card.mat-elevation-z6 {
  @include mat.elevation(6);
}

.mat-mdc-card.mat-elevation-z8 {
  @include mat.elevation(8);
}

.mat-mdc-card.mat-elevation-z10 {
  @include mat.elevation(10);
}

// add more mat-elevations that are needed...

Version: @angular/material: 15.2.4

This works in angular 16 also.

We also have to add the following line on the top of style.scss file. Reference @use "@angular/material" as mat;

Try to just grow the height of mat-card, works for me the elevation.

Any updates on this?

Oof. I mean, that’s good to know as a workaround, but that’s not really an acceptable fix.

This is working. mat-card-content class=“mat-elevation-z8”

Use mat-card-content tag.

Will this be fixed in v15.1.0 or do we have to employ our workarounds for now?

By the way, i don’t know if this is done on purpose, but it seems running “mdc-migration” command in not listed on angular material 14 -> 15 migration guide.

It adds the step if you check the “I use Angular material” checkbox. The migration tool is mentioned in the Read Further link

In Angular Material v15, many of the components have been refactored to be based on the official Material Design Components for Web (MDC). This change affected the DOM and CSS classes of many components. Read further