Angular 10 : mat-elevation-z is not working for any component

user_8741901 0
Viewed 4332

I'm using the class mat-elevation-z4 in a mat-toolbar e mat-card elements, and it simply doesn't work. Even if I don't apply any other CSS in those elements.

The versions:
Angular CLI: 10.0.6
Node: 10.14.2
OS: win32 x64
Angular: 10.0.9

The application is running in Chrome desktop, and I've tried in Firefox also.

I used this to try to fix: but it only worked in toolbar and generated other bugs:

.antiBug {
    position: relative;
    z-index: 2;    
}

My mat-card:

<mat-card class="mat-elevation-z4">
    <mat-card-title class="title">Bem vindo!</mat-card-title>
    <mat-card-subtitle class="subtitle">
        Sistema para exemplificar a construção de um cadastro em Angular
    </mat-card-subtitle>
</mat-card>

I don't want to blindly install older versions of Angular in the hope that the problems disappears.

How can I fix this?

PS: coincidentally, in the same project I have material buttons, and their styles are working, EXCEPT the mat-rised-button, which is "3D" to. It looks like Angular is having some problem to control z-index...

Look at the class mat.elevation-z8 of my tool-bar

enter image description here

And here, the same of my mat-card

enter image description here

angular10 angular-material angular
1 Answers

I had a similar problem, but it turns out that when I did install the Angular Material, it does not added "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css" to my angular.json style section, inside the build section.

Style section of the angular.json file

After adding this code, it's working fine!

user_66514180
Related