Angular Material 排版干扰 mat-data-table 样式答案

【问题标题】：Angular Material typography interfering mat-data-table stylesAngular Material 排版干扰 mat-data-table 样式
【发布时间】：2018-02-20 16:17:30
【问题描述】：

我将.mat-typography 类应用于我的文档正文。实施数据表排序后，我注意到排序指示箭头稍微偏离了位置。检查文档后，我注意到排版类覆盖了排序设置的字体样式。

在这里，我从 material.angular.io 分叉了排序演示并添加了排版类：https://angular-9ddpgm.stackblitz.io - 点击“否”。标题 - 箭头本身具有更高的基线。

在原始演示（没有排版）中，情况并非如此：https://material.angular.io/components/table/overview

这是 Angular Material 的问题还是我需要以不同的方式使用排版设置？

【问题讨论】：

标签： angular angular-material styling typography

【解决方案1】：

.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);
}

这对我有帮助

【讨论】：