How can I reduce the rounded corners of a MatFormField?

Question

I want to reduce the roundness of the corners of a with a inside to make it more rectangular (sharp corners).

<mat-form-field appearance="outline">
  <input type="text" placeholder="Select or input manually"/>
</mat-form-field>

According to the documentation I should be able to set $small-component-radius to something smaller than the default 4px. I tried 2px or 0 in my styles.css like $small-component-radius: 0;, but it has no effect.

mat-form-field {
  border-radius: 2px !important;
}

Same in my custom theme.scss without an effect.

@use '@material/shape';
$small-component-radius: 0;

What can I do?

Answer 1

Your code has the .mat-form-field CSS selector which would select a element with class="mat-form-field" but I see nothing that has that class defined anywhere.

Since you are using Angular Material you should mostly be looking at the docs for that which you can find here: https://material.angular.io/components/form-field/overview

Answer 2

Use the custom style

::ng-deep .mat-form-field-outline-start {
  border-radius: 0 !important;
 
}

::ng-deep .mat-form-field-outline-end {
  border-radius: 0 !important;
}

Answer 3

What I found is that in my material-theme.scss file I can just overwrite the proper variable:

:root {
  --mdc-outlined-text-field-container-shape: 0;
}

More information in the excellent article that sent me in the right direction.