In my Angular 8 project, I am utilizing Angular material to enhance the design of my material cards. To set up the shadow effect on these cards, I am using the elevation helper mixins provided in the documentation: https://material.angular.io/guide/elevation
Instead of customizing the elevations individually in each component's CSS file, I am attempting to apply it at a global level. However, I have encountered an issue where only some of the CSS rules are being applied when declared globally.
Global styles.css declaration:
// styles.scss
@import '~@angular/material/theming';
.card-design {
border: 1px solid #ff0000; // this rule IS applied
@include mat-elevation(8); // this rule is NOT applied
}
Component-level declaration:
// nameOfComponent.component.scss
@import '~@angular/material/theming';
.card-design {
border: 1px solid #ff0000; // this rule IS applied
@include mat-elevation(8); // this rule IS applied
}
The fact that the border color is correctly applied when declaring the class at the global level indicates that the class is being recognized, but the elevation effect is either not being applied or getting overwritten somehow.
How can I resolve this issue?