材料 11 - 应用 mat-sort-header 时无法右对齐 5 列中的 2 列 mat-h​​eader-cell

Question

enter image description here我正在使用 Angular 材料 11。当使用带有 mat-h​​eader-cell 的 *matHeaderCellDef 定义每个列标题并且应用 mat-sort-header 时，我处于无法应用所需的情况风格。我可以通过应用 align="right" 来右对齐标题下方单元格的内容。但是，不仅标题不允许这样做，而且似乎在应用 mat-sort-header 时添加 css 类以提供任何调整都不能充分执行。似乎 mat-sort-header 最终构建了一个具有内联样式的子元素，它覆盖了上面应用的任何 css 类。

我尝试了很多事情，包括其他激发灵感的帖子。但是，还没有在任何地方看到这个确切的问题。

我有 2 列：“权重”和“值”，我试图右对齐列标题。

StackBlitz

感谢您对此提供的任何帮助。谢谢

Answer 1

您可以使用以下样式正确设置标题

:host ::ng-deep .headerRight .mat-sort-header-content {
  justify-content: flex-end !important;
  width: 100% !important;
}