Search code examples
angularangular-material-6angular-material-7

Angular Material 7.3 mat-card changes


I upgraded from angular 6 to angular 7 and my material

from:6.2.0

to: 7.3.3

I'm noticing that my mat-card items are showing the border disappeared in the new version but was raised in the older one; the border in the image is gone

enter image description here

looking at CSS, the older one had a whole box of:

<mat-card _ngcontent-c51="" class="mat-card"></mat-card>

enter image description here

Did that style change between the 2 versions? Is there a way to find a comparison of what got changed between them?


Solution

  • I suspect this is the culprit.

    feat(elevation): move elevation rules into theme stylesheets (#11344)

    BREAKING CHANGE:

    Because mat-elevation usages have been moved out of component stylesheets, users who have not invoked a theme mixin will not see any elevation shadows on Material components. However, users that have created a custom theme which lacks the elevation property will still see the default black shadows.

    How I found this:

    card.scss

    I then clicked history in the upper right corner to review all commits that impact this file.

    card.scss commit history

    The commits on Sep 18, 2018 is what stood out to me, based on the commit description I suspect this commit is related to what you have described.