Отключение эффекта ViewEncapsulation.None в Angular
Как отключить эффект ViewEncapsulation.None? Например. Один из моих компонентов (firstComponent) определяет класс css с некоторыми свойствами. Есть второй компонент, который использует тот же класс 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-tree в обоих компонентах, которые внутренне используют .ui-tree-container. Я хочу, чтобы фон моего дерева secondComponent был белым, а для всех остальных мест фон дерева должен оставаться черным.
Где твой код?
прикрепите код, а затем Ctrl+K, чтобы показать его как код, а не как текст
Добавлен код для получения дополнительной информации.
Ответы 3
Вы можете инкапсулировать свой 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 для обоих / любого из них или нет.
Вы также можете использовать ViewEncapsulation по умолчанию для FirstComponent и вместо этого использовать селектор :: ng-deep в ваших файлах css соответственно.
Второй компонент
::ng-deep .ui-tree .ui-tree-container{
background-color: white;
color: black;
}
Первый компонент
::ng-deep .ui-tree .ui-tree-container{
background-color: #252525;
color: white;
}
Если вы хотите повторно использовать CSS white только для настройки некоторых частей, вы можете использовать переменные scss.
Шаг 1
Создайте файл scss с общими свойствами и цветами по умолчанию
commontree.scss
$bgColor : white !default;
$color: black !default;
.ui-tree .ui-tree-container {
background-color: $bgColor;
color: $color;
}
Шаг 2
В файле scss вашего компонента при необходимости измените значения переменных и импортируйте файл comon scss.
component1.scsss
$bgColor: #252525; /* Override colors */
$color: white;
@import './commontree.scss';
component2.scss
/* Use default colors */
@import './commontree.scss';
Для этого вы можете (и, вероятно, должны) сохранить инкапсуляцию представления на ViewEncapsulation.Emulated по умолчанию.
показать код, может быть