3

I am using Angular material in my Angular 8 project and am trying to set up the design of the shadow on my material cards. I am using the elevation helper mixins as described here: https://material.angular.io/guide/elevation

Rather than customise these elevations in the css file of each component, I am trying to do it at a global level. When I declare the styling class at the component level it works, but when I declare it at a global level only SOME of the css works.

When I declare the class in the global styles.css file

// styles.scss
@import '~@angular/material/theming';

.card-design {
   border: 1px solid #ff0000; // this IS applied
   @include mat-elevation(8); // this is NOT applied
}

When I declare the class at the component level

// nameOfComponent.component.scss
@import '~@angular/material/theming';

.card-design {
   border: 1px solid #ff0000; // this IS applied
   @include mat-elevation(8); // this IS applied
}

Since the border color IS being applied when I declare the class at the global level I therefore know the class is being applied correctly, its just that the elevation is either not being applied or it is being overwritten.

How can I fix this?

thecloud_of_unknowing
  • 1,103
  • 14
  • 23

1 Answers1

0

Try using :host or/and ::ng-deep like this:

:host ::ng-deep .card-design {
   border: 1px solid #ff0000; // this IS applied
   @include mat-elevation(8); // this is NOT applied
}

or

:host .card-design {
   border: 1px solid #ff0000; // this IS applied
   @include mat-elevation(8); // this is NOT applied
}

Reed more about host here. Looks like the ::nd-deep has been deprecated link.

I've not tested it, but this should work since I encounter similar problems while working with Angular 7.

danyhiol
  • 594
  • 2
  • 7
  • 26