如何调整角度材质样式(不仅仅是简单的主题样式)

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 的边距，它是使用角度材质生成的代码给出的，如下所示：

<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 像素。

我的设计的规格说标题应该远离边框而不是32px16px。

如何实现此目的的最佳实践方法是什么？

中继到出现在那里的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 文件中添加样式。 但请确保使用阴影穿孔运算符来使样式起作用。

此方法也可用于其他方案。希望对您有所帮助。