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

Question

与 Angular Material Table组件，默认情况下，表格上的列标题将左对齐，这很棒:

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

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

我尝试添加以下 css 类定义，但没有成功:

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

Here is the demo我正在玩。

Answer 1

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

要为嵌套组件中的元素设置样式，您必须使用::ng-deep 选择器:

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

<强> Forked Stackblitz

还有其他方法可以解决这个问题:

• 使用封装:ViewEncapsulation.None

• 使用全局样式