Angular Material - 更改密度不会影响 html 元素

Question

我想让我的 matInput 小于默认大小。html 看起来像这样：

<mat-form-field class="input-parent" subscriptSizing="dynamic" appearance="outline" style=" margin-right: 10px; font-size: 12px;">
  <input matInput type="text" [(ngModel)]="input" (keydown)="checkForSubmit($event)">
</mat-form-field>

在scss中，我遵循了这个 答案，并添加了以下scss：

.input-parent{
  @include mat.input-density(-2);
}

但是，它根本不影响输入的大小。我也尝试过类似的东西

-mat.all-component-densities代替mat.input-density

将其移出类到主 scss 文件

将其放在 body 中而不是 .input-parent

将父类设置为 的父类mat-form-field而不是 的直接父类mat-input

但没有任何效果。我还想补充一点，改变按钮的密度是有效的，但改变输入的密度却不起作用。

有没有人有办法解决吗？谢谢

Answer 1

据我所知，到目前为止，这个功能的记录还很少。这是我测试过的：类定义必须位于全局样式文件中：

.input-parent {
  @include mat.form-field-density(-5);
}

如果你想在组件级别设置类，你必须用户::ng-deep：

::ng-deep .input-parent {
  @include mat.form-field-density(-5);
}

密度范围不返回错误 (-5 - 0)。