无法修改Angular Material中.mat-mdc-table的thead样式求助

你的问题核心是Angular的视图封装机制在起作用——Angular默认会给组件内的样式添加独特的属性前缀，导致你写的.mat-mdc-table thead样式无法穿透到Material组件内部的thead元素上，但开发者工具直接修改绕开了封装限制，所以能生效。

下面给你三种可行的解决方式：

• 使用::ng-deep穿透样式
  给样式加上::ng-deep前缀，就能打破视图封装，让样式作用到Material组件内部元素：

  @media only screen and (max-width: 665px){
    ::ng-deep .mat-mdc-table thead {
      display: none !important;
    }
  }
  

• 关闭当前组件的视图封装
  在组件的TS文件里，修改@Component装饰器的encapsulation配置，关闭视图封装后组件样式会全局生效，注意给组件根元素加唯一类名避免样式冲突：

  import { Component, ViewEncapsulation } from '@angular/core';
  
  @Component({
    selector: 'your-component',
    templateUrl: './your-component.component.html',
    styleUrls: ['./your-component.component.css'],
    encapsulation: ViewEncapsulation.None
  })
  export class YourComponent { }
  

• 把样式写到全局样式文件
  将这段媒体查询样式直接放到项目根目录的styles.css（或styles.scss）里，全局样式不受视图封装限制，能直接作用到所有mat-table组件：

  @media only screen and (max-width: 665px){
    .mat-mdc-table thead {
      display: none !important;
    }
  }
  

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