angular - 如何使 Angular 垫表中的排序箭头始终可见？

Question

目标是使 angular mat-table 的排序箭头始终可见(例如，它们的不透明度始终设置为 0.54)。

我尝试在我的 .css 文件中为此组件添加一些 css 代码。它使所有箭头都可见(我将不透明度设置为 0.54)，但在这种情况下，即使单击了箭头，所有箭头也始终保持此不透明度(通常，如果单击箭头，不透明度将设置为 1)。

我添加到我的 .css 文件中的代码:

::ng-deep .mat-sort-header-arrow.ng-trigger.ng-trigger-arrowPosition {
  opacity: 0.54 !important;
}

我希望箭头始终以不透明度 0.54 显示。箭头的其余行为应保持不变。在列未排序的情况下，例如，箭头处于未定义状态，箭头应为向上箭头且不透明度为 0.54。如果我点击箭头，它的不透明度应该设置为 1。如果我取消排序，箭头应该再次具有 0.54 的不透明度。

这里有一个例子: https://stackblitz.com/edit/angular-isxoc5 。所有箭头都显示为我想要的。但是如果你点击一个箭头，它的不透明度仍然是 0.54，而不是 1。

Answer 1

正如 Ervin 评论的那样，但使​​用 ng-deep

::ng-deep .mat-sort-header-container:not(.mat-sort-header-sorted) .mat-sort-header-arrow {
  opacity: 0.54 !important;
  transform: translateY(0px) !important;
}

但是，这不会删除悬停进入和悬停退出时箭头上的动画。