2

Всем доброго дня! Появилась необходимость задать стиль классом в компоненте PrimeNG. На первый взгляд простая задача, но стилизация компонента только в документации явно через указание inline стиля. Компонент переписывать не вижу резона ради этого. Часть View из Angular компонента

<style>
.data {
font-weight: bold;
}
</style>
<input type="text" pInputText [(ngModel)]="mdl_" (keypress)="onKey($event)" 
[style]="'font-weight':'bold'"/>

Так, как привел код, не хочу. Надо задействовать класс data. Как его указать в style? Спасибо за помощь.

2 ответа 2

2

Стили любого компонента по умолчанию будут иметь постфикс вида _ngcontent-${id}. Он добавляется в случае encapsulation: ViewEncapsulation.Emulated в декораторе Component. Стили же для компонентов PrimeNg указаны как body .component-class { ... }. Это ответ на то, почему с классами не работает - веса селекторов(постфиксный вариант "тяжелее").

Есть несколько вариантов-workaround:

  1. Использовать специальный селектор ::ng-deep(>4.3.0) или /deep//>>>(<4.2.6)
  2. Выставить encapsulation: ViewEncapsulation.None. Можно будет "стилить" классами, но в ущерб инкапсуляции компонента. Не советовал бы в случае среднего/большого проектов.
  3. Переназначать стили PrimeNg в файле style.css(в случае c angular-cli). Минус в том, что перебивать стили напрямую - bad practice, может привести к своеобразным багам и подорожанию поддержки. Положительный эффект можно наблюдать только в случае использования html/css фреймворка(bootstrap, foundation, bulma etc.), когда нужно унифицировать компоненты(кнопки, поля ввода)
  4. Заметил недавно в документации к angular-material совет, добавлять ссылку к стилю vendor-компонента в массив styleUrls, что позволит все держать и редактировать в пределах компонента не в ущерб инкапсуляции и best-practices. Как понял я: такое будет работать только в случае модульности библиотеки компонентов, где для каждого компонент строго свой файл стилей
1
  • Спасибо embarq за помощь. Проект близкий к среднему по масштабам, использовал вариант 3 - переопределил стили компонентов PrimeNG, не факт, что это правильно, но все же...
    – Andrew
    27 июл 2017 в 7:15
0

Возможно не понял вопроса, но что мешает явно указать класс

<input type="text" pInputText [(ngModel)]="mdl_" (keypress)="onKey($event)" class="data"/>

Если же есть некое условие при котором нужно выбрать из нескольких классов, то используйте директиву [class.{name of css class}]

<input type="text" pInputText [(ngModel)]="mdl_" (keypress)="onKey($event)" [class.data]="someCondition"/>
1
  • мешает viewEncapsulation
    – embarq
    17 июл 2017 в 2:09

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.