Angular Material 15 поле формы плавающая шкала этикеток ⇐ CSS

[Anonymous]

Я нахожусь в очень сложном процессе обновления компонентов Angular Material 14 до 15 (переход от устаревшей реализации к реализации MDC).
До этого момента я играл с приоритетами селектора CSS чтобы переопределить стили материалов, например, чтобы уменьшить высоту полей формы:

Код: Выделить всё

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, уменьшив при этом размер шрифта до фиксированных 13 пикселей. Теперь метка будет отображаться идеально, без эффекта «размытия». Однако метка станет больше белого пробела на границе поля формы. Это связано с этой частью компонента поля формы:

Код: Выделить всё

    style="width: calc(45px * var(--mat-mdc-form-field-floating-label-scale, 0.75) + 9px);">
Name

45 пикселей логически рассчитываются в соответствии с количеством символов в метке (здесь «Имя»). Но окончательная ширина также учитывает масштабирование плавающей метки (

Код: Выделить всё

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

).
Если я правильно понимаю, единственное решение изменить масштабирование плавающей метки при изменении размера зазора — это переопределить --mat-mdc-form-field- Масштаб плавающей метки. К сожалению, я не могу понять, как можно переопределить такое значение в документации по темам материалов Angular. Я даже не уверен, что это правильная документация для того, что я ищу.
Я открыл тот же вопрос на Angular Material Github.

Подробнее здесь: https://stackoverflow.com/questions/752 ... abel-scale