编辑ngx-datatable样式问题

Question

我正在关注ngx-datatable的主题设置。

首先我安装了ngx-datatable 10.4.0，因为它与Angular 4和早期版本的rxjs兼容。

我的问题在于桌子的造型。

我的模板文件如下所示：

＆＃13;

＆＃13;

<div>
    <ngx-datatable
        [rows]="rows"
        [columns]="columns"
        [columnMode]="'standard'"
        class="material"
        fixed-header
        [headerHeight]="50"
        [scrollbarV]="true">
    </ngx-datatable>
</div>

＆＃13;

＆＃13;

＆＃13;

我的scss文件内部：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我可以确认材料样式在一定程度上起作用：

我希望在标题下添加一个边框底部，但无济于事。

如果您查看演示：http://swimlane.github.io/ngx-datatable/#filter

样本表总是有一个边框底部。

如何配置表格以在标题下面插入边框？

我的ngx-datatable设置有问题吗？

Answer 1

对此组件的任何样式均应在全局 styles.scss文件中进行。

styles.scss ：

/* You can add global styles to this file, and also import other style files */
@import '~@swimlane/ngx-datatable/index.css';
@import '~@swimlane/ngx-datatable/themes/bootstrap.scss';
@import '~@swimlane/ngx-datatable/themes/material.scss';
@import '~@swimlane/ngx-datatable/themes/dark.scss';
@import '~@swimlane/ngx-datatable/assets/icons.css';

/* Preferably put any custom styles for ngx-datatable into your own "_datatable.scss" file 
   and @import it into global styles, but this is a simple working example */

.ngx-datatable {
  border: 1px solid #dddddd;
  ...
}

如果尚未使用全局样式文件，请确保该文件位于src/styles.scss。确保它包含在architect/build/options/styles下的 angular.json 中：

...
"styles": [
  "src/styles.scss",
  ...
]

默认情况下，Angular CLI应用程序应具有所有这些内置功能。<​​/ p>

很遗憾，文档没有提及，但是组件上的视图封装将阻止样式渗入任何嵌套的组件。实际上，这是更可取的，这样，当您构建供他人安装的组件并且偶然使用相同的类名时，样式就不会被破坏。

Answer 2

插入border-bottom并将其设置为菜单中提供的其他选项。

请参阅以下代码：

> .content {
    //width: ~"calc(100% - 900px)";
    //width: 100%;
    border-top: none;
    border-bottom:
}

Answer 3

9个月后...

在您的组件中检查

encapsulation: ViewEncapsulation.None