Уменьшить высоту текстового поля материала

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