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

Question

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

Answer 1

Если у вас есть контроль над кодом дочернего компонента, вы можете определить 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;
}

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

Answer 2

Мой "путь" использует 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>