How to reduce the height in mat-form-field?

Question

I need to reduce the height of the mat-form-field to 30px. (Not the just the inner element, the height of the whole mat-form-field. Any ideas?

This is a similar issue - How to change height in mat-form-field, but none of the solutions worrked properly.

Answer 1

You can apply the following CSS/SCSS code in the component's .scss or .css file or globally in the main global .scss or .css file depends with your use case.

::ng-deep .mat-form-field-appearance-outline .mat-form-field-flex {
height: 40px !important
}

sets the top padding of the .mat-form-field-infix element to 1px and also uses the !important flag to override conflicting styles.

Note that the ::ng-deep selector is used before the CSS rules, which allows the styles to be applied globally to elements inside the component's template. It is considered a deprecated technique and should be avoided in favor of other component-level styling approaches. If you need to center the text input you can also add this in your styling:

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

Screenshot(Before)

Screenshot after applying the css/scss styling