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 любые подсказки, извините за amcdnl, если вы читаете это

CSS проблема

Answer 1

Я предполагаю, что это связано с инкапсуляцией представления. В основном ваша CSS будет ограничена таким атрибутом, как [_ngcontent-c5], потому что элементы внутри вашего шаблона будут автоматически иметь это.

Однако элементы, добавленные в dom с помощью datatables, вероятно, не имеют этого атрибута, из-за которого стили ничего не делают.

Вы можете исправить это, добавив параметр encapsulation: ViewEncapsulation.None к вашему компоненту, например так:

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

Answer 2

encapsulation: ViewEncapsulation.Noneтребуется для. Но даже после его добавления он у меня не работал. Не уверен, что установка моего пакета была неполной.

Мне пришлось обновить angular.json, как показано ниже:

       "styles": [
          "node_modules/bootstrap/dist/css/bootstrap.min.css",
          "src/styles.css",
          "node_modules/@swimlane/ngx-datatable/index.css",
          "node_modules/@swimlane/ngx-datatable/themes/material.css",
          "node_modules/@swimlane/ngx-datatable/assets/icons.css"
        ],