如何将 MDC Web 的 Filled TextField 的高度设置得更小，但仍然允许浮动标签正确浮动？ 其他信息

问题描述

我发现你可以set the height of a MDC Web's Filled Text Field using the SASS mixin @include height(20px)。但是，在使用该 SASS mixin 设置高度后，显示的浮动标签就会消失。

进一步检查，它似乎设置为 display: none。当我手动将其设置为 display: block 时，它无法正确浮动并且离输入文本太近。

如何使文本字段的高度变小，但仍能正确显示浮动标签？

解决方法

文档中没有提到这一点，但是 height mixin 实际上有不止一个参数：

@mixin height(
  $height,$minimum-height-for-filled-label: variables.$minimum-height-for-filled-label,$query: feature-targeting.all()
) { ... }

第二个参数设置显示浮动标签的最小高度。如果高度小于最小值，则不会显示标签。默认值为 52px。所以我认为标签隐藏是故意的。

其他信息

我尝试将 $minimum-height-for-filled-label 参数设置为较小的值，但文本字段行为已损坏。可能有一种方法可以通过覆盖其他一些 SCSS 变量来修复行为，或者它不应该用于太小的高度......或者只是有问题。

或者，您可以尝试使用 density mixin。对于密度-1，它仍然显示浮动标签，但高度比默认值小一点。恕我直言，这种方式更符合 Material Design 指南。

这是示例链接 - https://codesandbox.io/s/mdc-textfield-height-test-yj6lm