Отключение эффекта ViewEncapsulation.None в Angular

Question

Как отключить эффект ViewEncapsulation.None? Например, один из моих компонентов (firstComponent) определяет класс css с некоторыми свойствами. Существует secondComponent, который использует тот же класс CSS. Я хочу, чтобы мой "secondComponent" использовал разные конкретные значения для свойств, определенных таблицей стилей первого компонента. Как мне этого добиться?

Примечание: я переопределил один и тот же класс в "secondComponent" с другими значениями, сохранив viewEncapsulation secondComponent по умолчанию. Это не сработало для меня.

FirstComponent:
@Component({
    moduleId: module.id,
    selector: "FirstComponent",
    templateUrl: 'FirstComponent.component.html',
    styleUrls: ['FirstComponent.component.css'],
    encapsulation: ViewEncapsulation.None
})
FirstComponent.component.css

.ui-tree .ui-tree-container {
    background-color: #252525;
    color: white;
}

Second Component:
@Component({
    moduleId: module.id,
    selector: "SecondComponent",
    templateUrl: 'SecondComponent.component.html',
    styleUrls: ['SecondComponent.component.css'],
})
SecondComponent.Component.css

.ui-tree .ui-tree-container {
    background-color: white;
    color: black;
}

Я создаю p-дерево в обоих компонентах, которые внутренне используют.ui-tree-container. Я хочу, чтобы фон дерева моего второго компонента был белым, в то время как для всех остальных мест фон дерева должен оставаться черным.

Answer 1

Вы также можете использовать Default ViewEncapsulation для FirstComponent, а вместо этого использовать селектор::ng-deep в файлах CSS соответственно.

SecondComponent

::ng-deep .ui-tree .ui-tree-container{
  background-color: white;
  color: black;
}

FirstComponent

::ng-deep .ui-tree .ui-tree-container{
  background-color: #252525;
  color: white;
}

Answer 2

Вы можете инкапсулировать свой CSS в ваших селекторах компонентов.

FirstComponent.component.css

FirstComponent .ui-tree .ui-tree-container {
    background-color: #252525;
    color: white;
}

SecondComponent.component.css

SecondComponent .ui-tree .ui-tree-container {
    background-color: white;
    color: black;
}

Таким образом, они не будут влиять друг на друга шаблоны. Кроме того, вы можете использовать ViewEncapsulation.None для обоих / любого из них или нет.

Answer 3

Если вы хотите повторно использовать CSS белый только для настройки некоторых частей, вы можете использовать переменные scss

Шаг 1

Создать файл scss с общими свойствами и цветами по умолчанию

commontree.scss

$bgColor : white !default;
$color: black !default;

.ui-tree .ui-tree-container {
    background-color: $bgColor;
    color: $color;
}

Шаг 2

В файле scss вашего компонента измените значения переменных, если это необходимо, и импортируйте comss scss файл

component1.scsss

$bgColor:  #252525; /* Override colors */
$color: white;
@import './commontree.scss';

component2.scss

/* Use default colors */
@import './commontree.scss';

Для этого вы можете (и, вероятно, должны) сохранить инкапсуляцию вида по умолчанию ViewEncapsulation.Emulated

Stackblitz демо