覆盖 Mat-Form-Field 默认样式

Question

我使用 mat-form-field 创建了一个搜索栏并尝试自定义样式。现在，输入和图标周围有一个类似边框的灰色区域。此外，当我单击输入时，输入周围会出现边框：

<form #formRef="ngForm" class="form-inline" (ngSubmit)="searchTicker(searchInput.value)" #form="ngForm" [formGroup]="formGroup" style="display:flex; justify-content: center; ">
    <mat-form-field style="width: 400px;" class="search-bar">
        <div style="display: flex;align-items: center;" class="search-bar-container" >
            <input #searchInput class="form-control" placeholder="Enter Stock Ticker Symbol" 
            matInput [matAutocomplete]="auto" formControlName = "tickerValue" value="selectedTicker" style="background-color: white;" >
            <mat-autocomplete #auto="matAutocomplete">
                <mat-option *ngFor="let item of ACArray" [value]="item.symbol" (click)="selectOption(item.symbol)"> {{item.symbol}} | {{item.description}} </mat-option>
            </mat-autocomplete>
            <button mat-icon-button type="submit"> 
                <mat-icon>search</mat-icon>
            </button>
            
            <button mat-icon-button (click)="searchInput.value = '' ; clearResults()"> 
                <mat-icon>close</mat-icon>
            </button>
        </div>
    </mat-form-field>
</form>

.search-bar-container{
    background: white;
}

如何删除此灰色区域（或使其变为白色）并删除输入周围的边框？

我在这个论坛上尝试了很多建议的方法，但都不起作用。

我将不胜感激任何帮助！

Answer 1

将此 CSS 添加到您的全局 styles.scss 或特定于组件的 CSS 文件中：

/* Remove gray border and background */
.mat-form-field {
  border: none;
  background-color: transparent;
}

/* Remove outline on focus */
.mat-form-field.mat-focused .mat-form-field-underline {
  display: none;
}

/* Remove border and background on input element */
.mat-form-field-wrapper {
  background-color: transparent;
  border-radius: 0; /* if needed */
}

希望有帮助