CSS 问题 Ngx 表 angular2 泳道

Question

我目前在让 ngx-datatable 具有正确的 css 方面遇到问题。我在我的 css 文件中有这个来导入正确的 css。

@import '@swimlane/ngx-datatable/release/index.css';
@import '@swimlane/ngx-datatable/release/themes/material.css';
@import '@swimlane/ngx-datatable/release/assets/icons.css';

它似乎只做了它应该做的一半。这是我调用库的 html 部分。

  <ngx-datatable  class="material striped"
    class="material"
    [rows]="rows"
    [columns]="columns"
    [columnMode]="'force'"
    [headerHeight]="50"
    [footerHeight]="50"
    [rowHeight]="100">
  </ngx-datatable>

如果有人知道为什么会发生这种情况，那将非常有帮助。

@amcdnl任何线索，如果您阅读本文，很抱歉打扰您

CSS Issue

Answer 1

我认为它与 View 封装有关。基本上你的 css 将被限定在像 [_ngcontent-c5] 这样的属性范围内，因为你的模板中的元素会自动拥有它。

然而，通过数据表添加到 dom 的元素可能没有该属性，导致样式无所事事。

您可以通过向您的组件添加选项 encapsulation: ViewEncapsulation.None 来解决这个问题，如下所示:

import { ViewEncapsulation } from '@angular/core';
@Component({
  [...] // other code like template and style urls
  encapsulation: ViewEncapsulation.None
})