如何根据屏幕尺寸修改Angular Material Table的排版级别？

你尝试通过Material主题混合宏修改表格排版，但设置被_data-table.scss里的内部样式覆盖，核心原因是你的选择器优先级低于组件内部的.mdc-data-table__content选择器。

解决方案：提升选择器优先级，直接作用于内部元素 #

修改你的Sass混合宏，将选择器指向表格内部的内容容器，结合媒体查询确保样式优先级足够：

_mat-table.scss
--------------------------------
@use '@angular/material' as mat;
@use 'sass:map';

@mixin theme($theme) {
  $typography: map.get($theme, typography);

  // 直接定位到表格内部的内容容器，提升样式优先级
  .mat-mdc-table .mdc-data-table__content {
    @media only screen and (max-width: 1023px) {
        @include mat.typography-level($typography, 'caption');
    }
  }
}

备选方案：使用!important（不推荐） #

如果优先级调整仍不生效，可临时用!important强制覆盖，但不建议长期使用，会增加样式维护成本：

@mixin theme($theme) {
  $typography: map.get($theme, typography);

  .mat-mdc-table {
    @media only screen and (max-width: 1023px) {
        @include mat.typography-level($typography, 'caption') !important;
    }
  }
}

原理说明 #

Angular Material MDC风格表格的文本样式直接作用在.mdc-data-table__content元素上，原选择器.mat-mdc-table仅指向外层容器，无法覆盖内部元素的样式。通过.mat-mdc-table .mdc-data-table__content的嵌套选择器，可让你的样式优先级高于组件内部的基础选择器，从而生效。

内容的提问来源于stack exchange，提问作者George Knap