时间戳

首页 > 解决方案 > Angular Material 6 覆盖输入/选择样式

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

问题描述

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

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

这是我的代码：

<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 之类的类，只是想看看我是否能找到合适的类并且还没有运气。

不在焦点

专注

填写

标签： angular-material

解决方案

推荐阅读