mat-card-flat SCSS class not working

[odahcam]

Bug, feature request, or proposal:

bug

What is the expected behavior?

.mat-card-flat class to make a card look flatten.

What is the current behavior?

So many shadows.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-material2-issue-ercan7?file=app/app.component.html

What is the use-case or motivation for changing an existing behavior?

The class is there and it's not working.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Material >= 5 <= 6

Is there anything else we should know?

The class .mat-elevation-z works, that's because a rule in;
https://github.com/angular/material2/blob/21d004a4322df944539458281e1983965cfb6edd/src/lib/core/style/_elevation.scss#L151
...I think.

[EdricChan03]

That's because the styles for the card seem to be overriding the .mat-card-flat class. If you check the DevTools, the .mat-card:not([class*="mat-elevation-z"]) seems to override .mat-card-flat.

[odahcam]

Exactly, I just don't have any idea on how to fix it.

[odahcam]

I'd like to suggest a matCardFlat directive that would automatically handle the flat effect, removing the user's need of knowing how to style the component, something like this:

import { Directive, ElementRef } from '@angular/core';

@Directive({
  selector: 'mat-card[matCardFlat]',
  exportAs: 'matCardFlat'
})
export class MatCardFlatDirective {

    constructor(elRef: ElementRef) {
        const el: HTMLElement = elRef.nativeElement;
        el.classList.add('mat-card-flat', 'mat-elevation-z0');
    }

}

Where .mat-card-flat could also make squared border cards, etc.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}