ng2-smart-tableにカスタムCSSを追加するには

Question

ng2-smart-tableで角度2を使用しています。

ここに私のコードです。

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-smart-tableに追加する方法はありますか？

私はこの

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

を試みたが、それは動作しません。

Answer 1

view encapsulationが設定されていないため、コンポーネントをスタイルするためにhostを使用してください。

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

ホストとhostcontext link

Answer 2

の詳細情報私たちは直接、私は同じを使用しています以下を使用することができます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; } 

Answer 3

をテーブルに変更を加えました私のコードで。

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