Как стилизовать p-заголовок p-диалога, то есть всю часть заголовка?

Question

Я пытаюсь стилизовать p-header компонента p-dialog окна Primeng, и я застрял в его стилизации. Я хочу, чтобы весь элемент заголовка был красным, но вместо этого становится красным только мой текст. Вот мой фрагмент кода:

Вот результат, который я получаю:

This is the desired output:

<p-dialog  [(visible)]="popup.visible">
  <p-header [ngStyle] = "{'background-color':'red'}">
    {{popup.header}}
  </p-header>
  {{popup.message}}
</p-dialog>

Я также пробовал styleClass, ngClass, [style] тоже не повезло

 @Component({
    encapsulation: ViewEncapsulation.None
})

работает, но я не хочу отключать viewEncapsulation.

Answer 1

Пока у вас нет этих классов в шаблоне из компонентов Primeng, вы не можете получить к ним доступ из компонента-шаблона. css

В этой ситуации вам нужен глобальный / theme css, который переопределяет стили из PrimeNG.

Или вы можете использовать depricated селектор ::ng-deep в компоненте css файл, например:

  :host ::ng-deep .ui-dialog .ui-dialog-titlebar {
      background-color: red;
  }