如何在ng2-smart-table中添加自定义css

我正在使用angular2与ng2-smart-table。如何在ng2-smart-table中添加自定义css

这是我的代码。

settings = { 
    mode:"external", 
    actions:{add:false,position:'right',custom: [{ name: 'View', title: `<i class="fa fa-eye" aria-hidden="true"></i>` }]}, 
    edit: { 
     editButtonContent: '<i class="fa fa-pencil-square" aria-hidden="true"></i>', 
     saveButtonContent: '<i class="ion-checkmark"></i>', 
     cancelButtonContent:'<i class="ion-close"></i>', 
    }, 
    delete: { 
     deleteButtonContent: '<i class="fa fa-trash" aria-hidden="true"></i>', 
     confirmDelete: true 
    }, 
    columns: { 
     Check:{ 
     title: "Check", 
     type: 'html', 
     }, 
     filter: false 
     }, 
     orderby:{ 
     title: "Name", 
     filter: true 
     }, 
     purchased:{ 
     title: "Purchased", 
     type: 'html', 
     }, 
     filter: false 
     }, 
     shipto:{ 
     title: "Ship To", 
     filter: true 
     }, 
     date:{ 
     title: "Date", 
     filter: true 
     }, 
     total:{ 
     title: "Total Amount", 
     filter: true 
     }, 
     status: { 
     title: "Status", 
     filter: true 
     } 
    } 
    };

我在表中添加了自定义视图图标。它的工作原理，但如何添加自定义CSS在ng2智能表？

我想这

ng2-smart-table thead > tr > th { background-color: blue; }

但它不工作。

来源

2017-08-26 sarankani

尝试使用host来制作组件样式，因为没有设置view encapsulation。在主机和hostcontext

:host /deep/ ng2-smart-table thead > tr > th { 
     background-color:blue; 
}

更多信息link

来源

2017-08-26 08:05:38

下面的SCSS改变文件

:host /deep/ ng2-smart-table-title a:focus { color: #009ECE; } 

:host /deep/ ng2-smart-table thead > tr > th > div { color: #009ECE; } 

:host /deep/ td.ng2-smart-actions a {cursor: pointer;color: #009ECE; }

来源

2017-10-14 07:29:43

我们可以直接使用我现在用的是相同的，下面我已经取得了表中的变化在我的代码中。

:host>>>table tr th { 
    // your css here. 
}

来源

2017-10-24 11:25:24

如何在ng2-smart-table中添加自定义css

回答

相关问题