Как изменить высоту в поле mat-form-field

Добавьте их в свой CSS в файле оригинальный стекблиц.

::ng-deep .mat-form-field-flex > .mat-form-field-infix { padding: 0.4em 0px !important;}
::ng-deep .mat-form-field-appearance-outline .mat-form-field-label { margin-top:-15px; }
::ng-deep label.ng-star-inserted { transform: translateY(-0.59375em) scale(.75) !important; }

ОБНОВЛЕНО: с переходом для метки...

::ng-deep .mat-form-field-flex > .mat-form-field-infix { padding: 0.4em 0px !important;}
::ng-deep .mat-form-field-label-wrapper { top: -1.5em; }

::ng-deep .mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label {
    transform: translateY(-1.1em) scale(.75);
    width: 133.33333%;
}

Использование решения @AkberIqbal испортило мой стиль для полей формы мата, а не outline. Также это решение не нуждается ни в каких !important;. С !important; ты уже потерялся :D.

Итак, вот безопасный способ добавить ваши глобальные стили: (кажется излишним, но я скорее сэкономлю, чем сожалею)

mat-form-field.mat-form-field.mat-form-field-appearance-outline > div.mat-form-field-wrapper > div.mat-form-field-flex > div.mat-form-field-infix  { padding: 0.4em 0px }
mat-form-field.mat-form-field.mat-form-field-appearance-outline > div.mat-form-field-wrapper > div.mat-form-field-flex > div.mat-form-field-infix > span.mat-form-field-label-wrapper { top: -1.5em; }

.mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label {
    transform: translateY(-1.1em) scale(.75);
    width: 133.33333%;
}

Итак, как вы видите. Я «выслеживаю» каждый класс, пока не найду схему! Мне нравится, когда стиль контура применяется только к полям контура..

Вот мое недавнее решение для поля высотой 32 пикселя с закругленными углами.

  & .mat-form-field-wrapper {
    height: 44.85px;

    & .mat-form-field-flex {
      height: 32px;

      & .mat-form-field-outline {
        $borderRadius: 25px;
        height: 28px;

        & .mat-form-field-outline-start {
          border-radius: $borderRadius 0 0 $borderRadius;
          width: 13px !important; // Override Material in-line style
        }

        & .mat-form-field-outline-end {
          border-radius: 0 $borderRadius $borderRadius 0;
        }
      }

      & .mat-form-field-infix {
        left: 4px;
        padding: 0;
        top: -7px;

        & .mat-form-field-label,
        & .mat-input-element {
          font-size: 12px;
        }

        & .mat-form-field-label-wrapper {
          top: -1.04375em;

          & .mat-form-field-label {
            height: 16px;
          }
        }
      }
    }
  }

Если кто-то хочет сделать ответ Акбера Икбала классовым (чтобы были доступны оба размера):

:host ::ng-deep {
  .my-custom-component-small { // add my-custom-component-small class to your mat-form-field element
    .mat-form-field-flex > .mat-form-field-infix { padding: 0.4em 0 !important;}
    .mat-form-field-label-wrapper { top: -1.5em; }

    &.mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label {
      transform: translateY(-1.1em) scale(.75);
      width: 133.33333%;
    }
  }
}

Надеемся, что команда Angular добавит поддержку пользовательского интерфейса высокой плотности в будущих выпусках (высокая плотность является частью спецификации дизайна материалов).

TLDR: настроить размер шрифта окружающего контейнера.

Длиннее: Функциональность для изменения размеров полей формы встроена в Angular Material, поэтому, если вы не хотите изменять относительные пропорции в поле, вам не нужно заморачиваться с изменением размеров отдельных компонентов (см. документацию).

Ключом к настройке размера поля на самом деле является просто настройка размера шрифта в окружающем контейнере. Как только вы это сделаете, все остальное будет масштабироваться вместе с ним. например

Размер шрифта контейнера: 12px;

<div style = "font-size: 12px">
  
  <mat-form-field appearance = "outline">
    <mat-label>Your name</mat-label>
    <input matInput placeholder = "Jane Doe">
  </mat-form-field>

  <mat-form-field appearance = "outline">
    <mat-label>Your email</mat-label>
    <input matInput placeholder = "[email protected]">
  </mat-form-field>

</div>

Результирующая форма:

Размер шрифта контейнера: 18px;

<div style = "font-size: 18px">
  
  <mat-form-field...

</div>

Результирующая форма:

NB

Это не решение для вас, если вас не устраивает соотношение заполнения внутри форм. Однако это другой вопрос, чем просто изменить размер форм. Изменить размер просто, изменить соотношение отступов и полей еще сложнее!

Это то, что я использовал:

.small-input.mat-form-field-appearance-outline .mat-form-field-infix {
    padding: .25em 0 .75em 0;
    font-size: 14px;
}
.small-input.mat-form-field-appearance-outline .mat-form-field-infix .mat-select-arrow{margin-top: 10px;}
.small-input.mat-form-field-appearance-outline .mat-select-empty + .mat-form-field-label-wrapper .mat-form-field-label{margin-top: -0.75em;}

Вот еще один подход:

/* Angular Material Overrides */
.mat-form-field-appearance-outline .mat-form-field-outline {
  color: #ccc; /* Override outline color. */
}

.mat-form-field-appearance-outline .mat-form-field-infix {
  padding: .65em 0; /* Original top/bottom value was 1em. */
}


.mat-input-element {
  position: relative;
  top:  -1.2em; /* Adjust accordingly to keep placeholder/input text vertically centered. */
}

.mat-form-field-label-wrapper {
  top: -1.2em; /* Adjust accordingly to keep <mat-label> text vertically centered. */
}

TL;DR Поля формы материала основаны на font-size свойстве поля.

Не делайте ошибку, регулируя высоту материала, гребля и т. д. в вашем CSS/SCSS... Элементы материальной формы, такие как ввод и выбор, основаны на font-size. Кроме того, встроенные стили не рекомендуются, поэтому вы можете просто добавить немного CSS. Атрибут «внешний вид» не имеет значения.

::ng-deep .mat-form-field {
    font-size: 12px; // example
}

Эта «проблема» невозможности скрыть плавающую метку упоминается здесь: https://github.com/angular/components/issues/11845

Упомянутый приятный обходной путь заключается в том, чтобы не включать метку мата в поле формы мата и добавлять его в свой css, локальный или глобальный. Вам может понадобиться использовать ::ng-deep.

.mat-form-field:not(.mat-form-field-has-label) .mat-form-field-infix {
  border-top-width: 0;
}

Как объяснили многие постеры, поле угловой формы материала основано на размере шрифта, поэтому для всех вас, кто хочет определить пользовательское поле формы, вот мой код для изменения размера как высоты, так и ширины, не затрагивая входной шрифт или значок переключить размер.

• Определите внутри компонента css этот код и примените их как класс к метке mat-form-field.

.custom-form-field {
  width: 200px;
  font-size: 10px;
  margin-top: 3px;
  margin-bottom: -1.25em;

  mat-datepicker-toggle {
      font-size: 12px;
  }

  input.mat-input-element {
      padding-bottom: 2px;
      font-size: 12px;
      color: $title-color;
  }
}

Вы можете глубоко переопределить значение заполнения стиля контура:

    ::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
  padding: .5em;
}

Для меня это было хорошим решением

Примените изменение к селектору .mat-form-field .mat-form-field-infix. В Sass это будет:

.mat-form-field {
  .mat-form-field-infix {
     height: 16px;
  }
}

Если вы не используете «mat-label» внутри «mat-select», то ниже css будет работать

::ng-deep {
    .mat-form-field-infix {
        border: 0px !important;
    }
    .mat-form-field-appearance-outline .mat-select-arrow-wrapper {
        transform: none !important;
    }
}

До:

После: