垫表单域颜色变化答案

【问题标题】：Mat form field color changing垫表单域颜色变化
【发布时间】：2020-09-09 13:28:37
【问题描述】：

我正在研究 Angular 应用程序，我在下面的两个链接中遇到了类似的问题

Conditionally applying css to mat form field Changing color of mat form ripple conditionally

但是两个链接上建议的解决方案都不起作用。有人知道更好的解决方案吗？

【问题讨论】：

解决方案为何不适合您？你的具体要求是什么？您可以发布问题可重现的堆栈闪电战吗 :)

标签： angular angular8 angular9

【解决方案1】：

您可以在 mat-form-field 中应用内联 CSS，就像我在示例中所做的那样。 style="color:red"

<mat-form-field appearance="legacy" style="color:red">
 <mat-label>Legacy form field</mat-label>
 <input matInput placeholder="Placeholder">
 <mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
 <mat-hint>Hint</mat-hint>
</mat-form-field>

【讨论】：

【解决方案2】：

您好，我用后续步骤更改我的 mat-form-field 的颜色

不要忘记出现在 mat-form-field 的组件上的这一行：

@Component({
  ...,
  encapsulation: ViewEncapsulation.None
})

在你改变不同的元素颜色白色之后：

光标颜色：

.mat-input-element {
   caret-color: gray;
}

轮廓颜色：

.mat-form-field-appearance-outline .mat-form-field-outline {
    color: rgba($color: #FFFFFF, $alpha: 0.3);
}

轮廓焦点颜色：

.mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick {
    color: rgba($color: #FFFFFF, $alpha: 0.8);
}

标签颜色：

mat-label{
    color:rgba($color: #FFFFFF, $alpha: 0.8);
}

【讨论】：