Solutnion 1:
Изменить encapsulation
компонента на encapsulation: ViewEncapsulation.Native
@Component({
selector: ...,
encapsulation: ViewEncapsulation.Native
...
})
Solutnion 2:
::ng-deep .pack-modal-custom{
min-width: 800px !important;
max-width: none !important;
background-color: black !important;
}
Solutnion 3:
Переместите .pack-modal-custom
код sass в глобальный файл .scss (например, styles.scss в корневой папке)
Explenation:
Сначала вам нужно разобраться в механизме css-компонента angular. Короче говоря, при добавлении стиля в файл .scss компонента angular генерирует маркер , который отвечает за добавление стиля только к элементам компонента. Это причина того, что вы не получите свой sass-код, влияющий на nxg-modal. Для этого вам нужно изменить режим инкапсуляции компонента. Или добавьте ::ng-deep
, который "подталкивает" стиль к глобальному тегу стиля для вашего. Или вы сделаете это сами, добавив его в глобальный файл sass.
Проверьте эту угловую гильдию для более подробной информации.