Angular Material Table - CSS för att få rubriker att vänsterjusteras när text bryts

Med Angular Material Table-komponenten kommer kolumnrubrikerna i en tabell som standard att vänsterjusteras, vilket är utmärkt:

Men om det inte finns tillräckligt med plats för rubriken så bryts texten, vilket är okej förutom att texten då centreras...

Hur gör jag så att texten vänsterjusteras? Jag trodde att detta skulle vara enkelt, men jag har problem. Detta verkar också bara hända på rubriker med sortering, eftersom om du tar bort mat-sort-header-direktivet från någon av rubrikcellerna, så vänsterjusteras saker korrekt.

Jag försökte lägga till följande CSS-klassdefinition, men utan framgång:

.mat-sort-header-button {
    text-align: left;
}

Här är demon jag leker med.

Svar #1

Anledningen till att dina stilar inte fungerar är att Angular använder emulerad kapsling som standard, så dina stilar är komponentbegränsade. Det innebär att du bara kan tillämpa klasser på element som placeras direkt i komponentens mall. Du kan inte styla inbäddade komponenter.

För att styla element från nästlade komponenter måste du använda ::ng-deep-selektorn:

::ng-deep .mat-sort-header-button {
  text-align: left;
}

Gafflad Stackblitz

Det finns andra sätt att lösa det:

• använder encapsulation: ViewEncapsulation.None

• använder globala stilar

Svar #2

Om någon fortfarande letar efter global styling, kolla detta.

StackBlitz-länk för sorteringshuvudets justering

Definiera följande stilar i style.css:

För textjustering i sorteringshuvud eller normalt huvud

th.text-align-left,th.text-align-left .mat-sort-header-button {
    text-align: left !important;
}
th.text-align-right,th.text-align-right .mat-sort-header-button {
    text-align: right !important;
}
th.text-align-center,th.text-align-center .mat-sort-header-button {
    text-align: center !important;
}

För innehållsjustering i sorteringshuvud

th.align-center .mat-sort-header-container {
    justify-content: center;
}
th.align-right .mat-sort-header-container {
    justify-content: flex-end;
}
th.align-left .mat-sort-header-container {
    justify-content: flex-start;
}

Och du kan använda dessa text-align-left, align-left etc klasser i th