Is it possible to adjust mat-form-field-outline thickness?

Question

I'm trying to style angular material's input to look the same as all inputs in this app.

Is it possible to adjust the thickness of the schedule's input outline to have the same width as the project's input border?

Answer 1

The classes to override are:

.mat-form-field-appearance-outline .mat-form-field-outline-thick .mat-form-field-outline-start,
.mat-form-field-appearance-outline .mat-form-field-outline-thick .mat-form-field-outline-end,
.mat-form-field-appearance-outline .mat-form-field-outline-thick .mat-form-field-outline-gap {
    border-width: 1px !important;
}

Make sure you use border-width and not border

Answer 2

angular +15

after my search, I found a simple way without ng-deep or !important

we can change color or thickness (width) by this code I put it in body in style.scss

for normal : --mdc-outlined-text-field-outline

for hover : --mdc-outlined-text-field-hover-outline

for focus : --mdc-outlined-text-field-focus-outline

after that add -color or -width

body {
      --mdc-outlined-text-field-outline-color: #d0d5dd;
      --mdc-outlined-text-field-hover-outline-color: #d0d5dd;
      --mdc-outlined-text-field-hover-outline-width: 0.5px;
      --mdc-outlined-text-field-focus-outline-color: #d0d5dd;
      --mdc-outlined-text-field-focus-outline-width: 0.5px;
  }

simple for custom inputs outline