如何调整 Angular Material 样式（不仅仅是简单的主题样式）

Question

我有以下代码：

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

在 MyCustomComponent 的模板中，我使用 mat-card 类似这样：

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

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

<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>

该 div 在mat-card 提供的填充16px 上添加了16px 的边距顶部，它将标题从卡片的边框推开32 像素。

我的设计规范说标题应该远离边界16px 而不是32px。

如何做到这一点的最佳实践方式是什么？

在出现在那里的div 上进行中继并设置类似mat-card-header > div 的样式似乎是错误的，因为我将设置材质卡的这个特定实现的样式。下一个版本，这个 div 可能最终会成为其他元素。

我能做到：

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

但这对我来说又有点老套了。

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

Answer 1

我知道的两种方式

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

2. 组件级别：- 如果您只想在使用 mat-card 的特定组件内使用此样式，请在 component.scss / css 文件中添加样式。 但请确保使用阴影穿透运算符来使样式生效。

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