减少高度材料文本字段答案

【问题标题】：Reduce height material textfield减少高度材料文本字段
【发布时间】：2020-01-23 13:47:08
【问题描述】：

我正在使用材料设计，并且完全按照文档页面 (https://material.io/develop/web/components/input-controls/text-field/) 中的说明导入了文本字段。所以，没有 Angular 或 React。我不明白如何降低输入字段的高度，因为所有在线解决方案都使用 Angular 或 React

【问题讨论】：

您可以查看此链接，或许它可以帮助您解决问题：stackoverflow.com/questions/53854030/…
是的，正如我所说，所有的解决方案似乎都带有角度或反应，我使用的是普通的 javascript/html/css

标签： javascript html css material-design

【解决方案1】：

我假设你使用 SASS？因此会有一个变量来实现这一点：

https://github.com/material-components/material-components-web/blob/ef99808cba809294cb2d90903d12cdf930071f4d/packages/mdc-textfield/_variables.scss#L55

$mdc-text-field-height: 56px !default;

否则您可以尝试通过全局 css 硬编码更改它，但我不建议这样做：

input.mdc-text-field__input {
    font-size: 10px;
    line-height: 10px;
    height: 10px;
}

div.mdc-text-field.mdc-ripple-upgraded {
    height: 30px;
}

【讨论】：

我试过你的代码，但这样做的“placeolder label”一开始没有居中
哪个代码？的CSS？当然，您需要覆盖所有内容，因此还有很多事情要做。 Sass 将是最好的解决方案，因为您将以设计的方式使用该元素。 sass 不适合你吗？
是的，我正在使用 sass。我的意思是仅仅改变 $mdc-text-field-height 变量是不够的，因为占位符不会居中