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

Question

这是我的html代码输出 我想让mat-chip表单字段的大小与上面的表单字段相同。 这是我使用chips的位置。 我想减小芯片mat-form的大小。

- Leonard Loss

---

嗨，伙计，请尝试在这里发布您的代码片段，我会在审核您的代码后进行查看，然后尝试帮助您，谢谢。 - Zubair Saif

尝试设置芯片的宽度。 - Zubair Saif

@ZubairSaif 谢谢您的回复。这不是关于宽度的问题。我希望在输入芯片后，表单字段的大小保持不变。一旦我输入芯片，表单字段的高度就会增加。 - Leonard Loss

.mat-standard-chip { min-height: 40px !important} 尝试这个 - Zubair Saif

Answer 1

您可以覆盖 Angular/Material 中的样式。

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

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

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

因此，您可以覆盖此设置以使芯片更小。

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

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

- andrew

Answer 2

从开发工具中，尝试获取与您希望设置大小的元素相关联的正确类。然后使用任何预处理器CSS，在组件类中设置该元素的样式。

- vsnikhilvs