Как убрать контур радиуса угла границы поля в форме матрицы

Question

Я использую угловое материальное очертание mat-form-field для разработки формы.Я получаю стандартное представление текстового поля контура mat-form-field с радиусом угла границы.Можно ли как-нибудь удалить радиус углового угла контура mat-form-field и преобразовать его в квадратное текстовое поле.

Я попытался изменить стили по умолчанию для углового материала mat-form-field с помощьюследующее, но это не работает.

// css

.mat-form-field-appearance-outline .mat-form-field-outline-start 
.alignment{
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}

// html

<mat-form-field appearance="outline" [hideRequiredMarker]="true" 
class="alignment">
<mat-label>Email Address</mat-label>
<input type="text" matInput placeholder="Enter email address">
</mat-form-field>

Я ожидаю поле mat mat form form без рамкитекстовое поле углового радиуса точно так же, как квадратное текстовое поле mat-form-field, но получающее представление по умолчанию mat-form-field.

Answer 1

Материал v7.3.4

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

Answer 2

Вот так я убрал радиус границы.

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

Answer 3

Это удалит border-radius

.alignment .mat-form-field-outline-start,
.alignment .mat-form-field-outline-end {
    border-radius: 0px !important;
}

, но вам нужно будет поместить его в таблицу стилей верхнего уровня (например, styles.css), которая добавлена ​​в angular.json,чтобы переопределить стиль компонента Угловой материал.