Стилизация PrimeNG p-tabView

Мне не удается стилизовать текст PrimeNG TabView.

Вот Stackblitz, показывающий проблему.

Что мне не хватает?


tabview css primeng
person Horse Badorties    schedule 22.11.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Один из способов решить вашу проблему - переопределить класс PrimeNG относительно заголовка tabview: ui-tabview-title.

Так что-то вроде

.ui-tabview-title {
  color: red;
}

должен сделать свое дело. Обязательно назовите этот CSS после PrimeNG.

Изменить

Вы можете применить CSS к заголовку первой вкладки с помощью свойства :first-child:

ul.ui-tabview-nav li:first-child span {
  color: red;
}

См. Рабочий StackBlitz.

person Antikhippe    schedule 02.12.2018
comment
Спасибо за Ваш ответ. Не уверен, что я понимаю, что вы имеете в виду, называя этот CSS после PrimeNG. Помещение его в app.component.css ничего не меняет. И не сделает ли переопределение класса все три подписи вкладок красными? Я хотел, чтобы это было только для первой вкладки. - person Horse Badorties; 02.12.2018
comment
Я раздвоил ваш StackBlitz, чтобы дать более подробную информацию. - person Antikhippe; 02.12.2018
comment
Я принял ваш ответ, так как это, по крайней мере, обходной путь, спасибо. Хотя я не рад засорять мой app-global style.css стилями, специфичными для компонентов, и если бы у меня была еще одна панель вкладок в другом компоненте, которая также подобрала бы этот стиль. Не могли бы вы представить решение, изолированное от этого самого компонента? - person Horse Badorties; 03.12.2018
comment
Я редактировал StackBlitz. Добавьте encapsulation: ViewEncapsulation.None в свой компонент. ;) - person Antikhippe; 03.12.2018