Question

我正在尝试将材料输入元素上的颜色替换为始终为白色。这包括输入/选择字段的轮廓，占位符和文本本身，即使该字段不在焦点上也是如此。

我确实阅读了官方的主要材料替代风格指南，但发现它有点宽泛，并希望为此提供更多指导。

这是我的代码：

<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;
}

开箱即用的材料颜色仅在重点关注字段时适用。当字段不清晰时，我无法找到应用于轮廓或占位符的样式。

我尝试使用！important在styles.scss中覆盖诸如.mat-form-field-appearance-outline之类的类，以查看是否可以找到合适的类并且还没有任何运气。

Not in Focus

Focused

Filled In

Angular Material 6覆盖输入/选择样式

0 个答案: