Angular Material 15 表单字段浮动标签刻度

Question

我正处于将 Angular Material 14 组件升级到 15 组件的非常困难的过程（从旧版本迁移到 MDC 实现）。

到目前为止，我使用 CSS 选择器优先级来覆盖 Material 样式，例如减少表单字段的高度：

mat-form-field.mat-mdc-form-field.mat-form-field-appearance-outline div.mat-mdc-form-field-infix {
  padding: 3px 0 0 0;
  min-height: 0;
}

虽然很乏味（也许不是最好的方法），但这对于大多数组件来说效果都很好。但是，我遇到了表单字段浮动标签的问题，特别是材质生成的 CSS 的这一部分：

.mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
    --mat-mdc-form-field-label-transform: translateY(-32.75px)
          scale(var(--mat-mdc-form-field-floating-label-scale, 0.75));
    transform: var(--mat-mdc-form-field-label-transform);
}

75% 的比例具有使所有标签“模糊”的副作用，这对于可读性来说非常烦人。

使用 CSS，我可以覆盖比例以避免 0.75 并设置 1.0，同时将字体大小减小到固定 13px。标签现在可以完美显示，不会出现“模糊”效果。但是，标签会变得比表单字段边框中的白色间隙更大。这是由于表单字段组件的这一部分造成的：

<div class="mdc-notched-outline__notch" 
    style="width: calc(45px * var(--mat-mdc-form-field-floating-label-scale, 0.75) + 9px);">
        <label ...><mat-label ...>Name</mat-label></label>
</div>

45px是根据标签的字符数逻辑计算的（这里

Name

）。但最终宽度还要考虑浮动标签缩放(

--mat-mdc-form-field-floating-label-scale

)。

如果我理解正确，在更改间隙大小的同时更改浮动标签缩放的唯一解决方案是覆盖

--mat-mdc-form-field-floating-label-scale

。不幸的是，我无法理解如何覆盖 Angular Material Theming Documentation 中的此类值。我什至不确定这是否是我正在寻找的正确文档。

我在 Angular Material Github 上打开了同样的问题。

Answer 1

我刚刚遇到这个问题，并注意到 css 属性

will-change

导致文本模糊。我将其从

transform

更改为

auto

，从而修复了模糊的文本。

.mdc-floating-label {
  ...
  will-change: auto;
}

Answer 2

我也努力解决这个问题来覆盖--mat-mdc-form-field-floating-label-scale。

对我来说，它是这样工作的：

.mat-mdc-form-field {
    --mat-mdc-form-field-floating-label-scale: 0.76;
}

我不确定这是否正是你的意思。