使用Angular Material Table 组件，默认情况下，表格上的列标题将左对齐，这很棒：
但是，如果没有足够的空间放置标题，则文本会换行，这很好，除了文本然后居中对齐...
如何使文本左对齐？我认为这将是直截了当的，但我遇到了问题。这似乎也只发生在带有排序的标题上，因为如果您从任何标题单元格中删除 mat-sort-header 指令，事情就会正确对齐。
我尝试添加以下 css 类定义，但没有成功：
.mat-sort-header-button {
text-align: left;
}
Here is the demo我在玩。
【问题讨论】：
标签： css angular typescript sass angular-material
如果有人仍在寻找全局样式，请检查此。
StackBlitz link for sort header alignment
在 style.css 中定义以下样式：
用于排序标题或普通标题中的文本对齐
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;
}
用于排序标题中的内容对齐
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;
}
你可以在 th 中使用这些 text-align-left、align-left 等类
【讨论】：
您的样式不起作用的原因是 Angular 默认使用 Emulated 封装，因此您的样式是组件范围的。这意味着您只能将类应用于直接放置在组件模板中的元素。您不能设置嵌套组件的样式。
要对嵌套组件中的元素进行样式设置，您必须使用 ::ng-deep 选择器：
::ng-deep .mat-sort-header-button {
text-align: left;
}
还有其他方法可以解决：
使用encapsulation: ViewEncapsulation.None
使用全局样式
【讨论】：