Почему я могу установить настройки высоты мата только на уровне компонентов css? - PullRequest
Новая
       51

Почему я могу установить настройки высоты мата только на уровне компонентов css?

0 голосов
/ 15 июня 2019

Я использую материал Angular в своем проекте Angular 8 и пытаюсь настроить дизайн тени на своих карточках материалов. Я использую миксины помощника повышения, как описано здесь: https://material.angular.io/guide/elevation

Вместо того, чтобы настраивать эти повышения в файле CSS каждого компонента, я пытаюсь сделать это на глобальном уровне. Когда я объявляю класс стилей на уровне компонентов, он работает, но когда я объявляю его на глобальном уровне, работает только НЕКОТОРЫЙ из css.

Когда я объявляю класс в глобальном файле styles.css 

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

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

Когда я объявляю класс на уровне компонента 

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

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

Поскольку цвет границы применяется, когда я объявляю класс на глобальном уровне, я знаю, что класс применяется правильно, просто то, что высота не применяется или перезаписывается.

Как я могу это исправить?

...