我试图覆盖材质输入元素上的颜色，始终为白色 . 这包括输入/选择字段的轮廓，占位符和文本本身，即使字段没有焦点 .

我确实阅读了官方材料重写样式指南，但我发现它有点宽泛，并希望有更多的方向来做到这一点 .

这是我的代码：

<mat-card class="coverage-card">
 <mat-card-content>
   <form>
     <mat-form-field appearance="outline" class="address-zip white-text">
       <mat-label>Square Footage</mat-label>
       <input type="number" matInput>
     </mat-form-field>
   </form>
 </mat-card-content>
</mat-card>

css样式：

.coverage-card{
    min-width: 400px;
    max-width: 620px;    
    background-color: #FF6A13;
    height: 575px;
    border-radius: 20px;
}

.address-zip{
    max-width: 190px;
    margin-right: 10px;
}

.white-text{
    color: white;
}

开箱即用的材料颜色仅适用于场地聚焦时 . 当字段不在焦点上时，我无法找到应用于轮廓或占位符的样式 .

我尝试在styles.scss中重写像.mat-form-field-appearance-outline这样的类，带有一个！important，只是为了看看我是否能找到合适的类并且还没有运气 .

Not in Focus

Focused

Filled In

angular-material