Стили компонентов не применяются при инкапсуляции эмулированного представления (Angular 5)
Я использую библиотеку PrimeNG (https://www.primefaces.org/primeng) в приложении Angular 5, и я понял, что, если я использую некоторые из ее элементов управления внутри компонента Angular с ViewEncapsulation.Emulated, я не могу применить к ним какой-либо пользовательский стиль.
Например, я использую элемент управления p-checkbox внутри компонента, и у меня есть следующие (ужасные) правила CSS в его файле стилей:
th {
background-color: olive !important;
}
.ui-chkbox {
background-color: aqua !important;
height: 2.5rem !important;
}
ПРИМЕЧАНИЕ. ui-chkbox - это DIV, содержащий флажок.
Вот как это будет выглядеть, если я поставлю encapsulation: ViewEncapsulation.None:
Если я перейду на encapsulation: ViewEncapsulation.Emulated, это будет выглядеть так:
Как видите, тег компонента th все еще стилизован, а компонент флажка - нет. Я думал, что эмулированная инкапсуляция представления была предназначена для «изоляции» стилей компонентов, чтобы они не конфликтовали с другими, определенными снаружи, но похоже, что это также влияет на внутренние компоненты.
Может кто-нибудь объяснить такое поведение? Я прочитал пару руководств по инкапсуляции, но не смог найти причину.
Спасибо!
Ответы 2
Вы не можете изменить стили компонентов Primeng без использования ViewEncapsulation.None.
The styles specified in @Component metadata apply only within the template of that component.
They are not inherited by any components nested within the template nor by any content projected into the component.
Вы можете настроить таргетинг только на основной элемент каждого дочернего компонента. Вы не сможете настроить таргетинг на какие-либо внутренние элементы, используемые внутри компонента.
Если вам нужно В самом деле, вы все равно можете использовать устарел::ng-deep для нацеливания на любой дочерний компонент:
:host ::ng-deep .ui-chkbox {
background-color: aqua !important;
height: 2.5rem !important;
}
Component styles normally apply only to the HTML in the component's own template.
Use the /deep/ shadow-piercing descendant combinator to force a style down through the child component tree into all the child component views. The /deep/ combinator works to any depth of nested components, and it applies to both the view children and content children of the component.
Подробнее см. https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep.
The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools. As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep). Until then ::ng-deep should be preferred for a broader compatibility with the tools.
Спасибо за предложение. Но, как и Томаш, я стараюсь избегать использования устаревших решений. Чтобы настроить элемент управления флажком PrimeNG только внутри нужного мне компонента, я воспользуюсь его директивой styleClass, которая позволяет применить дополнительный класс, чтобы быть более конкретным в файле CSS. Например: <p-checkbox styleClass = "customCheckbox"> позволяет мне определять собственные стили с помощью селектора .customCheckbox.ui-chkbox.
:: ng-deep по-прежнему является предпочтительным способом достижения команды Angular, если у вас есть вариант использования В самом деле для этого.
но похоже, что это не так, поскольку у вас есть альтернативы в библиотеке, которую вы используете!
это реальное решение. Отличная работа. огромное спасибо
Ваш ответ помог мне лучше понять инкапсуляцию представления. Кроме того, читая документацию PrimeNG, я понял, что вы можете применить директиву
styleClassк компоненту, чтобы помочь вам настроить его без переопределения глобальных стилей. Спасибо!