Angular Material typography interfering mat-data-table styles

0
votes

I applied the .mat-typography class to the body of my document. After implementing data table sorting i noticed the sorting indicator arrow to be slightly off position. After inspecting the document, i noticed that the typography class overwrites the font styles set by the sorting.

Here i forked the sorting demo from material.angular.io and added the typography class: https://angular-9ddpgm.stackblitz.io - Click on the 'No.' header - The Arrow has a higher base line as the header itself.

In the original demo (without the typography) this is not the case: https://material.angular.io/components/table/overview

Is this a problem from Angular Material or do i need to use the typography settings differently?

1
angularangular-materialstylingtypography

1 Answers

0
votes
.mat-sort-header-arrow {
  opacity: 0;
  transform: translateY(25%);
}

.mat-sort-header-pointer-left.ng-trigger.ng-trigger-leftPointer{
  transform: rotate(-45deg);
}

.mat-sort-header-pointer-right.ng-trigger.ng-trigger-rightPointer{
  transform: rotate(45deg);
}

.mat-sort-header-indicator.ng-trigger.ng-trigger-indicator{
  transform: translateY(0px);
}

this helped me