Как я могу заставить ::ng-deep работать только для одного компонента? ⇐ CSS

[Anonymous]

Код: Выделить всё

[img]assets/images/variants/color_variant.png[/img]
COLOR VARIANT

[img]assets/images/variants/style_variant.png[/img]
STYLE VARIANT

Файл SASS

Код: Выделить всё

.dialog-content
display: flex
justify-content: center
align-items: center
width: 55vw
height: 55vh

.variant-options
display: flex
gap: 1rem

.variant-card
text-align: center
padding: 1rem
width: 100%
height: 100%
position: relative
background-color: transparent

.variant-image
max-width: 600px
max-height: 600px
border-radius: 15px

.variant-text
font-size: 4rem
line-height: normal
font-weight: bold
position: absolute
top: 30%
left: 5%
color: #3A3A3A

::ng-deep .variant-dialog .igx-dialog__window
background: transparent ! important
box-shadow: none ! important

::ng-deep .variant-dialog .igx-dialog__window вообще не влияет на CSS,
но ::ng-deep .igx-dialog__window влияет на него.
Также пробовал использовать :host, но это не решило проблему.
Хост
Для хоста указано «Неизвестное свойство CSS 'host'», устанавливающее значение :host больше не выдает предупреждение, а под хостом написано: «Незаконное вложение: под свойствами могут быть вложены только свойства»
Так что вопрос в том, как я могу это инкапсулировать не затрагивая другие диалоги igx.

Подробнее здесь: https://stackoverflow.com/questions/792 ... -component