PrimeNG p-dataview скрыть заголовок

Question

Я пишу приложение PrimeNG, которое включает элемент "p-dataview". Я пытаюсь скрыть заголовок, используя компонент CSS, как показано ниже.

HTML SNIPPET

<p-dataView [value]="cbItems" layout="grid">
 <ng-template let-item pTemplate="gridItem">
   <div class="ui-g-12 ui-md-6" >
    <p-checkbox label={{item.value}}></p-checkbox>
   </div>
 </ng-template>
</p-dataView>

CSS SNIPPET

.ui-dataview .ui-dataview-header {
  display: none;
}

Если я "проверю" элемент заголовка p-dataview в Chrome (Стили) я вижу запись для .ui-dataview .ui-dataview-header {} . Если отредактировать это в CHROME и добавить «display: none», это работает.

.ui-dataview .ui-dataview-header {
    border-bottom: 0 none;
    display: none;
}

Я просто не могу понять, как сделать то же самое в моих исходных файлах. Я уверен, что это больше отражает мои навыки новичка CSS. Любая помощь будет оценена.

Answer 1

, если вы поместите пользовательский стиль в глобальный файл стиля, будет работать стиль

. css

.ui-dataview .ui-dataview-header {
    border-bottom: 0 none;
    display: none;
}

, но проблема с решением выше ? заключается в собираясь применить к компоненту p-dataview во всем проекте, primeng предоставит решение, добавив класс обычного, затем примените стиль, так как пользовательский класс является родительским классом, подобным этому

template

<p-dataView styleClass="dataview-grid" [value]="cars" layout="grid">
 <ng-template let-item pTemplate="gridItem">
   <div class="ui-g-12 ui-md-6" >
    <p-checkbox label={{item.value}}></p-checkbox> {{item.brand}} , {{item.year}}
   </div>
 </ng-template>
</p-dataView>

стиль. css

.dataview-grid.ui-dataview .ui-dataview-header {
    border-bottom: 0 none;
    display: none;
}

демо ??