javascript - 降低高度 Material 文本字段

Question

我正在使用 Material Design，并且完全按照文档页面 (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;
}