NGX数据表cellClass不起作用

Question

我尝试将自定义CSS附加到ngx-datatable单元格。

<ngx-datatable-column 
  *ngFor="let column of tableOptions.columnDefs"
  [cellClass]="'my-custom-cell'"
  ...

的CSS my-custom-cell：

.my-custom-cell{
  padding: 0;
}

在开发工具中，我可以看到datatable-body-cell有类

class="datatable-body-cell my-custom-cell sort-active"

问题是没有css被覆盖

Answer 1

可能您遇到了有关View Encapsulation的问题。

ngx-datatable使用ViewEncapsulation.Then样式。您可以将.my-custom-cell样式定义添加到./src/styles.(s)css，也可以将组件的封装设置为None。

如果您还不了解视图封装，则可以从角度向导中查看视图封装的详细信息。

编辑 （回应汤姆的评论）

我也不需要这样的解决方案，但不幸的是，这就是这样。我已经准备了一个演示应用程序，可以显示我要告诉的内容。

.my-custom-cell分配给名称列。

.my-custom-cell-global分配给性别列。

./app/demo-component.ts

<ngx-datatable-column name="name" [cellClass]="'my-custom-cell'">
  <ng-template ngx-datatable-cell-template let-value="value">
    {{value}}
  </ng-template>
</ngx-datatable-column>
<ngx-datatable-column name="gender" [cellClass]="'my-custom-cell-global'">
  <ng-template ngx-datatable-cell-template let-value="value">
    {{value}}
  </ng-template>
</ngx-datatable-column>

./app/demo-component.scss

.my-custom-cell {
  background: red;
}

./styles.scss

.my-custom-cell-global {
  background: #e6f2ff;
}

如您所见，红色背景未分配给名称列。但是性别栏会变成蓝色背景色。

这是因为视图封装告诉cli编译.my-custom-cell类，如下所示：

.my-custom-cell[_ngcontent-c176]{background:red}

但是DatatableComponent正在使用ViewEncapsulation.None。如果检查“名称”列中的单元格之一，则可以看到具有.my-custom-cell类的datatable-body-cell不具有[_ngcontent-c176]属性。因此该类不适用。

如果取消注释封装行：46，则将看到[_ngcontent-c176]属性已从已编译的.my-custom-cell中删除，并且name列成功获取了样式。

如果您找到其他合适的方法，请告诉我。