Ändern CSS-Stil von Angular Material Data Tabelle

Question

Ich benutze mdDataTable, um Daten von Server abgerufen anzuzeigen. Gibt es eine Möglichkeit, die CSS-Klasse von mdt-row zu ändern? Wenn ich versuche, eine Klasse hinzufügen, überschreibt mdDatatable es

Answer 1

in Ihrer eigenen CSS-Datei, können Sie die CSS außer Kraft setzen, indem Sie explizit die Winkel md Klassen Targeting, wie folgt aus:

.mdt-row { 
    {overridesettingname}: {newsetting}; 
} 

Aber ich würde vorsichtig sein, weil das Site-weit überschreibt. Sie können nur eine einzelne Seite überschreiben, indem ein übergeordnetes Element auf der Seite ausgerichtet, wie:

.{mypageclassname} .mdt-row { 
    {overridesettingname}: {newsetting}; 
} 

Noch ein Hinweis, stellen Sie sicher, dass Ihre CSS-Datei wird nach der Winkel CSS-Datei geladen (s).

Answer 2

Sie können die Klassen und IDs für das Element im Developer Tool erkunden, Es ist einfach, Stil für alle Elemente hinzuzufügen, hier habe ich Beispielstile hinzugefügt, die Sie hinzufügen können, wie Sie möchten. Ich hoffe es hilft.

.mat-table { 
     overflow: auto; 
     max-height: 700px; 
     } 

.mat-header-cell .mat-sort-header-sorted { 
     color: #0A0A0A; 
     } 

md-pagination-wrapper { 
     width:auto !important; 
    } 

md-row:nth-child(even){ 
     background-color:#EDF1F5; 
     } 

md-row:nth-child(odd){ 
     background-color:#FDFDFB; 
     }