Angular Material Table - CSS для выравнивания заголовков по левому краю при переносе текста

Question

С компонентом Angular Material Table по умолчанию заголовки столбцов таблицы будут выровнены по левому краю, что здорово:

Однако, если для заголовка недостаточно места, текст переносится, что нормально, за исключением того, что текст выравнивается по центру ...

Как сделать текст выровненным по левому краю? Я думал, что это будет прямо вперед, но у меня есть проблемы. Это также, по-видимому, происходит только в заголовках с сортировкой, потому что если вы удалите директиву mat-sort-header из любой из ячеек заголовка, все останется правильно выровненным.

Я попытался добавить следующее определение класса CSS, но безуспешно:

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

Вот демоверсия , с которой я играюсь.

Answer 1

Причина, по которой ваши стили не работают, заключается в том, что Angular использует эмуляцию эмуляции по умолчанию, поэтому ваши стили имеют компонентную область. Это означает, что вы можете применять класс только к элементу, который размещен непосредственно в шаблоне компонента. Вы не можете стилизовать вложенные компоненты.

Чтобы оформить элементы из вложенных компонентов, вы должны использовать :: ng-deep selector:

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

Разветвленный стек-блиц

Есть и другие способы ее решения:

• с использованием encapsulation: ViewEncapsulation.None

• с использованием глобальных стилей