Angular Material Table - CSS 用于在文本换行时使标题左对齐

Question

使用Angular Material Table组件，默认情况下，表格上的列标题将左对齐，这很好：

但是，如果标题没有足够的空间，则文本会换行，这很好，只是文本然后居中对齐...

如何使文本左对齐？我认为这会很简单，但我遇到了问题。这似乎也只发生在带有排序的标题上，因为如果您mat-sort-header从任何标题单元格中删除指令，则左对齐正确。

我尝试添加以下 css 类定义，但没有运气：

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

这是我正在玩的演示。

Answer 1

您的样式不起作用的原因是 Angular 默认使用模拟封装，因此您的样式是组件范围的。这意味着您只能将类应用于直接放置在组件模板中的元素。您不能设置嵌套组件的样式。

To style elements from nested components you have to use ::ng-deep selector:

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

Forked Stackblitz

There are other ways to solve it:

• using encapsulation: ViewEncapsulation.None

• using global styles