如何降低具有“轮廓”外观（>= Angular 15）的基于 MCD 的角度材料输入组件的高度答案

【问题标题】：How to reduce the height of the MCD based angular material input components with "outlined" appearance (>= Angular 15)如何降低具有“轮廓”外观（>= Angular 15）的基于 MCD 的角度材料输入组件的高度
【发布时间】：2023-02-05 16:48:14
【问题描述】：

角形材料 (https://material.angular.io/) 中基于 MDC (https://github.com/material-components/material-components-web) 的输入组件在上方和下方占用了大量空间。

我试图将主题密度降低到 -2，但尽管如此，输入的高度还是太大了……但即便如此，padding-top 还是 12px，padding-bottom 还是 12px。

如果我天真地尝试覆盖 CSS 类中的填充（等等），它总是会产生影响，使各种输入看起来不再正确（例如文本区域、日期输入、自动完成）

如何在不同的输入类型中一致地改变这一点并减少空间？

【问题讨论】：

标签： css angular angular-material mdc-components

【解决方案1】：

如果您的 matInput 包含在 mat-grid-list 中，您可以使用此类：

/* low-list-row is a class created to reduce a mat-grid-list form density:
/* Pay attention: it removes the mat-hint*/
::ng-deep ._low-list-row .mat-form-field-subscript-wrapper {
    visibility: hidden !important;
}

::ng-deep ._low-list-row .mat-form-field-wrapper {
    padding-bottom: 0px !important;
}

::ng-deep ._low-list-row .mat-form-field-underline {
    bottom: 0.25em !important;
}

::ng-deep ._low-list-row .mat-grid-tile {
    height: 50px !important;
}

::ng-deep ._low-list-row {
    height: 50px !important;
}

它使用已弃用的 ::ng-deep 方法，但我不知道其他方法

如果它不包含在网格列表中，您可以利用它的一部分

【讨论】：