我应该如何调整 mat-form-field mat-chip 的大小？答案

【问题标题】：How shall I adjust the size of mat-form-field mat-chip?我应该如何调整 mat-form-field mat-chip 的大小？
【发布时间】：2021-10-11 21:03:12
【问题描述】：

这是我的 html 代码的输出

我想让mat-chip表单域的大小与上面的表单域一样。

【问题讨论】：

【解决方案1】：

从开发工具中，尝试为您希望为其设置大小的元素附加正确的类。然后使用任何预处理器 css，在该元素所在的组件类中设置该元素的样式。

【讨论】：

【解决方案2】：

您可以从角度/材质覆盖样式。

在这种情况下，只需在组件的 CSS 文件中的样式规则中添加相同的属性就足够了。您的组件 CSS 比下面的 mat-chip 规则具有更高的特异性。

芯片的高度由以下规则确定：

.mat-standard-chip {
   min-height: 32px;
}

所以你可以覆盖它以使芯片更小。

您可能还想使用以下规则修改字体大小：

.mat-chip {
   font-size: 14px;
}

【讨论】：