Правильный способ переопределить стиль дочернего компонента от углового компонента узла

Question

Как правильно переопределить стиль дочернего компонента от хост-компонента.Я попытался использовать encapsulation: ViewEncapsulation.None, но мне нужно записать переопределение в файле style.sass, а не в компоненте хоста.Что должно быть stackblitz

Answer 1

Мой "путь" использует viewEncapsulation.None, важно и добавить класс для дочернего элемента. Разветвленный Коннорс стекаблита

//The parent
.child1 .child-div {
  background-color: lime!important;
  height: 200px!important;
}

<div style="text-align: center;" class='parent'>Hi I am the app-root and I contain child-comp!
<app-child class="child1"></app-child>
<app-child ></app-child>
</div>

Answer 2

Если у вас есть контроль над кодом дочернего компонента, вы можете определить customStyle свойство ввода:

@Input() customStyle: {};

<div class="child-div" [ngStyle]="customStyle">I am the child</div>

и передать его из родительского компонента:

<app-child [customStyle]="style1"></app-child>

style1 = {
  backgroundColor: "red",
  height: "150px"
}

См. этот стек для демонстрации.

<Ч />

Подобный метод может позволить передать определенный атрибут стиля дочернему компоненту:

@Input() backgroundColor: string;

<div class="child-div" [style.background-color]="backgroundColor">I am the child</div>

из родительского компонента:

<app-child backgroundColor="red"></app-child>

См. этот стек-блиц для демонстрации.

<Ч />

В противном случае, до тех пор, пока Angular не предложит альтернативный метод, вы можете использовать ::ng-deep пронизывающий тень комбинатор потомков для изменения стиля дочернего компонента из родительского CSS:

:host ::ng-deep .parent .child-div {
  background-color: lime;
  height: 200px;
}

См. этот стек-блиц для демонстрации.