Angular mat-form-field not working properly - mdc-notched-outline__notch shows overlapping...

When using bootsrap 5 with Angular Material, the form fields have a top/bottom border overlapping the form field border. I believe this is the mdc-notched-outline__notch class is conflicting with a bootstrap style. If I remove the border it will have a gap in the form field border. Any suggestions on how to fix?

Form Field Example

I added the following to global styles but it adds a gap to the border of the form field.

.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field .mdc-notched-outline__notch { border-style: hidden; }

Form Field Example when removing border style of notch

Continue reading...