减少高度材质文本字段

Question

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

Answer 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;
}