Css 如何调整角度材质样式（不仅仅是简单的主题化样式）

我有以下代码：

<div>
 <my-custom-component></my-custom-component>
<div>

当它渲染时，我注意到有一个16px的边距，该边距是使用角度材质生成的代码给出的，看起来类似于：

<mat-card>
  <mat-card-header>
    <mat-card-title>{{ name }}</mat-card-title>
  </mat-card-header>
  <mat-card-content>{{ description }}</mat-card-content>
</mat-card>

<mat-card>
  <mat-card-header>
    <div class="mat-card-header-text"> <<< ******** This is the div I am asking about
      <mat-card-title>{{ name }}</mat-card-title>
    </div>
  </mat-card-header>
  <mat-card-content>{{ description }}</mat-card-content>
</mat-card>

但这对我来说似乎又有点令人讨厌

覆盖这些组件的内部样式的方法是什么？

我知道的两种方法

全局级别：-如果要将样式应用于应用程序中的所有卡，请添加 样式中的样式。scss/css删除填充/边距以获得所需的样式 效果

组件级别：-如果您只希望在使用mat卡的特定组件中使用此样式，请在Component.scss/css文件中添加样式。 但请确保使用“阴影穿透”操作符使样式正常工作

---

这种方法也可用于其他场景。希望有帮助。

什么是“暗影刺穿操作员”？mat卡有自己的类和结构。。。我觉得针对该结构就像针对特定于实现的mat卡实现。我觉得很讨厌。哦！你是说/深/或：：阴影？是的，这不是个好主意，它们已经从最新的浏览器中删除了。。。至少在铬合金中：

mat-card-header mat-card-title {
 margin-left: -16px;
 margin-right: -16px;
}