Angular Material 17中用mat-sort为未排序列显示双向排序箭头

要让未排序的mat-sort-header同时显示升序和降序箭头，需覆盖Angular Material的默认样式，确保两个箭头指针都可见并正确排列：

/* 未排序状态下显示箭头容器并调整布局 */
.mat-sort-header-container:not(.mat-sort-header-sorted) .mat-sort-header-arrow {
  opacity: 0.54 !important;
  transform: translateY(0) !important;
  display: flex;
  flex-direction: column;
  gap: -4px; /* 缩小箭头间距 */
}

/* 重置指示器位置 */
.mat-sort-header-container:not(.mat-sort-header-sorted) .mat-sort-header-indicator {
  transform: translateY(0) !important;
}

/* 调整上箭头的旋转角度与位置 */
.mat-sort-header-container:not(.mat-sort-header-sorted) .mat-sort-header-pointer-left {
  transform: rotate(45deg) !important;
  margin-bottom: -6px; /* 让箭头紧凑对齐 */
}

/* 调整下箭头的旋转角度 */
.mat-sort-header-container:not(.mat-sort-header-sorted) .mat-sort-header-pointer-right {
  transform: rotate(-45deg) !important;
}

/* 强制两个箭头指针都可见 */
.mat-sort-header-container:not(.mat-sort-header-sorted) .mat-sort-header-pointer {
  opacity: 1 !important;
  display: block !important;
}

关键说明： #

• Angular Material默认会在未排序状态下隐藏一个箭头指针，通过.mat-sort-header-pointer的强制显示规则可解除隐藏
• 使用flex-direction: column让两个箭头垂直排列，配合旋转角度实现上下双向箭头效果
• 调整margin-bottom和gap参数可优化箭头的紧凑度，适配不同UI需求

如果你的项目开启了组件样式隔离（默认开启），需要添加:host ::ng-deep穿透样式：

:host ::ng-deep .mat-sort-header-container:not(.mat-sort-header-sorted) .mat-sort-header-arrow {
  opacity: 0.54 !important;
  transform: translateY(0) !important;
  display: flex;
  flex-direction: column;
  gap: -4px;
}

:host ::ng-deep .mat-sort-header-container:not(.mat-sort-header-sorted) .mat-sort-header-indicator {
  transform: translateY(0) !important;
}

:host ::ng-deep .mat-sort-header-container:not(.mat-sort-header-sorted) .mat-sort-header-pointer-left {
  transform: rotate(45deg) !important;
  margin-bottom: -6px;
}

:host ::ng-deep .mat-sort-header-container:not(.mat-sort-header-sorted) .mat-sort-header-pointer-right {
  transform: rotate(-45deg) !important;
}

:host ::ng-deep .mat-sort-header-container:not(.mat-sort-header-sorted) .mat-sort-header-pointer {
  opacity: 1 !important;
  display: block !important;
}

内容的提问来源于stack exchange，提问作者AbdulRahman Riyaz