Ngx-datatable cellClass不工作

Question

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

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

my-custom-cell的Css：

.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.None 。您可以将 .my-custom-cell 样式定义添加到./src/styles.(s)css，也可以set your component's encapsulation to None。

如果您不了解view encapsulation from angular guide，可以查看Tom's comment的详细信息。

修改 （对a demo app的回复）

我也不想要这样的解决方案，但不幸的是，这似乎就是这样...... 我已准备好DatatableComponent is using ViewEncapsulation.None，其中显示了我想说的内容。

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

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

./应用程序/演示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>

./应用程序/演示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}

但是encapsulation line:46。如果你检查名称列中的一个单元格，那么你可以看到具有.my-custom-cell类的datatable-body-cell没有 [_ngcontent-c176]属性。所以这个课程没有应用。

如果您取消注释，那么您会看到[_ngcontent-c176]属性已从已编译的.my-custom-cell中删除，而name列会成功获得该样式。

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