如何在angular4中将外部样式分配给primeNG <p-column>答案

【问题标题】：how to assign external style to the primeNG <p-column> in angular4如何在angular4中将外部样式分配给primeNG <p-column>
【发布时间】：2017-09-22 15:48:04
【问题描述】：

如果我使用内部 CSS 进行背景颜色填充调整工作正常。我想在 Angular 4 中分配外部 CSS。使用内部css的代码如下：

HTML：

<p-dataTable [value]="facility"  [globalFilter]="gb" #dt>
   <p-column field="action" header=""></p-column>
   <p-column field="Goal" header="Goal" ></p-column>
   <p-column   class="datatable" field="day1" header="8/1" [style]="{'padding': '4px 0px'}" >
              <template pTemplate let-col let-data="rowData" >
                   <span [ngClass]="{'error': (data[col.field] <= 72),'warning':( 80 >= data[col.field] && data[col.field] >72), 'success':(data[col.field]>80)}" >{{ data[col.field] }}</span>
              </template>
   </p-column>
</p-dataTable>

CSS：

.error {
  background-color: red !important;
    padding-bottom: 47%;
    padding-top: 100%;
    padding-left: 37%;
    padding-right: 100%;
}

.warning{
    background-color:yellow !important;
    padding-bottom: 47%;
    padding-top: 100%;
    padding-left: 37%;
    padding-right: 100%;
}

.success{
    background-color:green !important;
    padding-bottom: 47%;
    padding-top: 100%;
    padding-left: 37%;
    padding-right: 100%;
}

【问题讨论】：

您是否正在尝试更改下一节中提到的 CSS 文件的样式？如果我没记错的话，您是否尝试使用类 - 数据表更改 p 列样式？
所以你保留了

标签： html css angular

【解决方案1】：

如果你想在数据表的元素中添加类，你应该使用：主机选择器：

:host /deep/ .ui-datatable {
}

用上面的这行包装你的 css 类。

有关组件样式和主机选择器的更多信息： https://angular.io/guide/component-styles#host

【讨论】：