PrimeNG p-dataview hide header - css

Question

I am writing a PrimeNG application which includes a "p-dataview" element. I am trying to hide the header using the component CSS as shown below.
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;
}
If I "inspect" the p-dataview header element in Chrome (Styles) i can see an entry for .ui-dataview .ui-dataview-header {}. If edit this in the CHROME and add "display:none", it works.
.ui-dataview .ui-dataview-header {
border-bottom: 0 none;
display: none;
}
I just can't figure out how to do the same in my source file(s). I'm sure this is more a reflection of my novice CSS skills. Any help would be appreciated.

Answer 1

if you put the custom style in global style file will work
style.css
.ui-dataview .ui-dataview-header {
border-bottom: 0 none;
display: none;
}
but the problem with the solution above 👆 is going to apply to p-dataview component in the whole project , primeng provide a solution by add a custome class then apply the stlye as the custom class is the parent class like this
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>
style.css
.dataview-grid.ui-dataview .ui-dataview-header {
border-bottom: 0 none;
display: none;
}
demo 🚀🚀