How to make sort arrows in angular mat-table always visible?

Issue

The goal is to make sorting arrows of angular mat-table always visible (e.g. they have always opacity set to 0.54).

I tried adding some css code to my .css file for this component. It made all arrows visible (I set opacity to 0.54), but in this case all arrows stay with this opacity always, even if an arrow was clicked (normally the opacity will set to 1 if the arrow was clicked).

The code I added to my .css file:

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

I want that arrows are always displayed with the Opacity 0.54. The rest behavior of the arrows should remain unchanged. In the case where a column is unsorted, e.g., the arrow is in an undefined state, the arrow should be an up arrow and have the opacity 0.54. If I click on the arrow, it should have the opacity set to 1. If I cancel the sorting, the arrow should have the opacity 0.54 again.

There is an example here: https://stackblitz.com/edit/angular-isxoc5. All arrows are displayed as I want. But if you click an arrow, it still have the opacity 0.54, not 1.

Solution

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.

Answered By - kebbaben