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

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

Just as Ervin commented but using 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;
}

This doesn't remove the animations on the arrows on hover enter and hover exit though.