PrimeNG p-dataview隐藏标题

Question

我正在编写一个包含“ p-dataview”元素的PrimeNG应用程序。我正在尝试使用组件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片段

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

如果我“检查” Chrome（样式）中的p-dataview标头元素，则可以看到。ui-dataview .ui-dataview-header {}的条目。如果在CHROME中进行编辑并添加“ display：none”，则可以使用。

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

我只是不知道如何在源文件中执行相同的操作。我确信这更多地反映了我的CSS新手技能。任何帮助，将不胜感激。

Answer 1

如果您将自定义样式放在全局样式文件中将起作用

style.css

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

但是上述👆解决方案的问题将适用于整个项目中的p-dataview组件，priming通过添加一个custome类提供解决方案，然后将stlye用作该自定义类是此类的父类

模板

<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 🚀🚀