您可以使用封装：ViewEncapsulation.None在组件的typescript文件中以最高优先级应用css。
示例：-
HTML代码
x1c 0d1x的数据
CSS格式

的
typescript

的
示例（演示）

的
在这里，我更新了内容的颜色，而没有使用ng-deep。这是Angular自己提出的正确解决方案。

不幸的是，由于封装的原因，更改Angular Material CSS并不简单。您可以参考以下链接了解更多信息：https://material.angular.io/guide/customizing-component-styles的数据。
没有推荐的方法来修改Angular Material样式，因为它们的设计不容易更改。但是，如果您仍然想继续，有三种可能的方法：
1.禁用封装：禁用封装会影响组件中的所有CSS样式，包括模板中其他组件的子元素。你可以在这里了解更多：https://angular.io/guide/view-encapsulation。
1.覆盖Angular项目根目录下style.css文件中的.mat-grid-tile-content类。任何CSS样式都将应用于项目中的任何HTML模板。如果更改未生效，请尝试使用！在属性的末尾添加important关键字。
1.用途：：ng-deep（deprecated）：虽然：：ng-deep已被弃用，但一些开发人员仍然喜欢它，因为没有完美的替代品。但是要谨慎，因为弃用可能会导致未来的问题。
总之，不建议修改“Angular 材质”样式，但如果选择这样做，请考虑每种方法的潜在后果。

对于mat-grid-tile，您可以使用两个额外的选择器

• 第一个月
• <mat-grid-tile-footer></mat-grid-title-footer>个

通过以这种方式结构化数据，您可以将内容移动到mat-grid-tile-header内部并实现结果，而不会影响其他实现。我用了三种风格，这应该解决你的问题。
1.独立样式表方法
超文本标记语言：

<mat-grid-list cols="4" rowHeight="100px">
  <mat-grid-tile
    *ngFor="let tile of tiles"
    [colspan]="tile.cols"
    [rowspan]="tile.rows"
    [style.background]="tile.color"
  >
    <mat-grid-tile-header> {{tile.text}} </mat-grid-tile-header>
  </mat-grid-tile>
</mat-grid-list>

字符串
本地样式表文件内容：

.mat-grid-tile .mat-grid-tile-header {
  align-items: flex-start;
  justify-content: center;
  background: transparent;
}

型
1.单式装订

<mat-grid-tile-header
  [style.align-items]="'flex-start'"
  [style.justify-content]="'center'"
  [style.background]="'transparent'"
>
  {{tile.text}}
</mat-grid-tile-header>

型
1.属性指令-NgStyle。请记住导入Common Module

<mat-grid-tile-header
          [ngStyle]="{'align-items': 'flex-start', 'justify-content': 'center', 'background': 'transparent'}"
        >{{tile.text}}
    </mat-grid-tile-header>

型