So fügen Sie benutzerdefinierte CSS in ng2-Smart-Tabelle

Question

Ich benutze Winkel 2 mit ng2-Smart-Tabelle.

Hier ist mein Code.

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 
     } 
    } 
    }; 

Ich habe benutzerdefinierte Ansicht Symbol in der Tabelle hinzugefügt. Es funktioniert, aber wie benutzerdefinierte CSS in ng2-Smart-Tabelle hinzufügen?

ich versucht, dieses

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

Aber es funktioniert nicht.

Answer 1

Versuchen Sie diese Verwendung von host, um die Komponenten zu stylen, wie view encapsulation nicht festgelegt ist.

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

Weitere Informationen über Host und hostcontext link

Answer 2

Ich habe die Änderungen in den Tabellen, die mit folgenden Änderungen in SCSS

Dateien

: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

wir können das direkt verwenden folgende ich die gleiche bin mit in meinem Code.

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