Изменение размера поля формы-мат

Question

Как я могу изменить размер всей материальной формы? Я бы хотел, чтобы поле формы было примерно того же размера, что и предыдущий текст h3. По умолчанию кажется, что изображение выглядит комично большим. Я пробовал применить size и font size CSS к элементу mat-form-field, элементу mat-select и элементу mat-option, но не добился желаемого результата.

---

settings.component.html

  Конфигурация   Выбранный объект:  Объект 1 Объект 2 Объект 3  

параметр. css

h1 {
    font-size: 4vh;
    font-weight: 600;
    font-family: 'Open Sans', sans-serif;
}

body {
    font-size: 2vh;
    font-weight: 300;
    color: lightgray;
    font-family: 'Open Sans', sans-serif;
}

.menu_bar {
    background-color: rgb(200, 213, 234);
    color: black;
}

.select {
    display:flex;
    flex-flow: row;
    justify-content: space-between;
}

.top-container {
    height: fit-content;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
}

Answer 1

Вы должны переопределить стиль класса в style.css или style.scss

.mat-form-field-appearance-outline .mat-form-field-infix {
    padding: 0px 0 9px 0;
    height: 16px;
}

Stackblitz: https://stackblitz.com/edit/angular-ud4dev?file=src%2Fstyles.scss