Angular Material: equal styling for mat-sort-headers and non mat-sort-headers

Question

I recently noticed that my column headers are not aligned horizontally. I figured out what causes it, but I don't know how to fix it exactly.

What I currently have

This is currently so because the HTML contains the following code

<ng-container matColumnDef="Status">
   <mat-header-cell *matHeaderCellDef mat-sort-header="Status">
     Status
     ... <!-- Unimportant information -->
   </mat-header-cell>
     ... <!-- Unimportant information -->
</ng-container>
<ng-container matColumnDef="Actions">
   <mat-header-cell *matHeaderCellDef> <!-- Notice how mat-sort-header is not present, this causes the visual issue -->
     Acties
   </mat-header-cell>
    ... <!-- Unimportant information -->
</ng-container>

What I want to achieve

Is easily doable by adding mat-sort-header="Status" to the Acties HTML code. However, this causes another issue, being the following error message (see image 3).

What I tried already

• I tried adding the mat-sort-header class styling to my Acties column but this doesn't fix it since the mat-sort-header also generates other HTML (button etc.).
• Adding mat-sort-header="status" (lowercase status) to my Acties HTML, but then it'll mess with sorting but not throw an error.
• Adding mat-sort-header="" (empty) to my Acties HTML, but then it'll mess with sorting, and sort on Acties instead which is not possible, but not throw an error.

Answer 1

Can you do a /deep/ styling selector and give the "acties" a class or id and target it with the rule you need?

/deep/ mat-header-cell.acties {
// your rules here
}