如何调整mat-form-field mat-chip的大小？

Question

这是我的 html 代码的输出

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

This is location from where I used chips.。我想减小芯片垫形式的尺寸。

Answer 1

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

Answer 2

您可以覆盖 angular/material 中的样式。

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

筹码的高度由以下规则决定：

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

因此您可以重写它以使芯片更小。

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

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