css - 更改 angular2 元素中 primeng 数据表中的字体大小

Question

我正在尝试调整列标题的字体大小，也可能是内容。我尝试根据Primeng here提到的结构类来做一个纯css的解决方案，但是没有用。 https://www.primefaces.org/primeng/#/datatable https://www.primefaces.org/primeng/#/theming

我查看了其他 stackoverflow，但发现这种方式是公认的答案。

<p-column field="type" header="Type"
        [style]="{'text-align': 'center', 'font-size': '0.8em'}"></p-column>

是否有一种纯 css 方法可以使用纯 css 解决方案修改 primeng 数据表和其他组件的字体大小。

值得一提的是，我并不是真正的 UI/UX 人员。因此，如果有人已经解决了这个问题，我将不胜感激。非常感谢。

Answer 1

您可以通过两种方式解决它。

Priming Datatable 可以使用样式属性 styleClass 或 tableStyleClass 设置样式

例子:

<p-dataTable [value]="cars" tableStyleClass="prime-table">
    <p-column field="vin" header="Vin" styleClass="pr-column1"></p-column>
    <p-column field="year" header="Year" styleClass="pr-column2"></p-column>
    <p-column field="brand" header="Brand" styleClass="pr-column3"></p-column>
    <p-column field="color" header="Color" styleClass="pr-column4"></p-column>. 
</p-dataTable> 

您可以为该属性赋予相应的样式类。

第二种样式编辑方式请引用https://www.primefaces.org/primeng/showcase/#/table

底部样式标题。在这里您可以获得数据表的样式元素。将您的自定义样式写入这些元素，它将为您工作。

例子:

.ui-datatable-header{
  text-align:center;
  font-size:20px;
} 

希望这两个能帮助您解决问题。