垫输入的动态加载颜色

Dynamic load color for mat-input

我得到了以下系统。 我们有一个后端系统,它从另一个系统获取输入以设置我们的 angular 应用程序。

因此,对于每个模块,我们加载不同的颜色来设计我们的应用程序。 模块 1 = 红色。 模块 2 = 蓝色。

我们正在寻找的是颜色的动态变化,因为它可以随时更改。 我见过的大多数解决方案都是硬编码的 css 但这不起作用。

我们尝试过的是:

<mat-form-field floatLabel="always" color="primary">
   <input #input matInput  [ngStyle]="{'color':  color }" />
</mat-form-field>

我们尝试调整主色板或使用 ngStyle 设置颜色,但都没有成功。

我认为您可以使用“ngClass”代替 ngStyle。你可以参考 angular 文档来了解它的实现。我希望它有所帮助。官方文档 here

经过更多挖掘。 几个小时后我找到了这个答案。

这需要您使用第三方:https://github.com/johannesjo/angular-material-css-vars

它的作用是覆盖 Angular 材料的主要托盘、重音托盘或警告托盘。我也确实在设置颜色的最高 lvl 上应用了它,否则它会产生过载。