css - 控制 mat-chip 的高度

Question

如何改变 Angular Material 芯片的高度？

<mat-chip-list>
  <mat-chip>Example</mat-chip>
</mat-chip-list>

默认实现将最小高度设置为 32 像素

Answer 1

默认情况下，mat-chip 将具有 min-height: 32px 和 height: 1px。 如果 mat-chip 下的文本/段落较长，您将收到默认的 min-height: 32px。

所以你可以通过将它设置为 auto 来控制高度，如下所示， 在你的 CSS 中，

.mat-standard-chip {    
   height: auto !important;
 }

如果您想使用具有类名/ID 的特定芯片，您可以对一些像素使用相同的高度属性。 示例:

.small-chip {
   height: 20px !important;
}