如何在Angular材质中为文本输入着色

Question

这是我的用户表格：

我有一个问题，输入字段的颜色是白色，背景是相同的白色。 我找不到任何地方如何更改输入字段的颜色。

color texte的属性css是什么？

这是我的模板：

<div class="example-container" style="color:red">
    <mat-form-field>
      <input matInput placeholder="Input">
    </mat-form-field>

    <mat-form-field>
      <textarea matInput placeholder="Textarea"></textarea>
    </mat-form-field>

    <mat-form-field>
      <mat-select placeholder="Select">
        <mat-option value="option">Option</mat-option>
      </mat-select>
    </mat-form-field>
  </div>
  new contact

Answer 1

@ J.S。如果您没有在应用程序中包含主题，但是如果您有兴趣自定义输入字段的颜色属性，那么这是正确的 -

如需更改占位符的颜色（在本例中为“输入”），您可以更改以下类别的“颜色” -

.mat-form-field-empty.mat-form-field-label {
    color: green;
}

用于在突出显示时更改下划线颜色 -

.mat-form-field-underline {
    background-color: green;
}

您必须在styles.scss（或styles.css）中加入此代码。

Answer 2

您是否已将颜色主题应用于项目：how to Include a theme，例如将其添加到styles.css中：

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

同样重要Angular Material Theming Guide

材质根据调色板决定应该应用哪种颜色。您可以像链接中所述进行配置。

作为最后一个选项，您可以使用css选择器覆盖样式（不推荐）。您可以在浏览器中调试您的应用程序，以了解要使用的css选择器。在你的情况下，我认为你可以使用：

.mat-form-field

如果不起作用，请使用：

::ng-deep .mat-form-field

Answer 3

谢谢， 我会直接使用自定义css，我使用less和visual studio compile css。

这是我的style.less

@import 'my.css';

我在文件中分叉了my.css： @angular\material\prebuilt-themes\purple-green.css

.mat-form-field-empty.mat-form-field-label {
    background: green;
    color:purple;
}

.mat-form-field-underline {
    background-color: green;
    color:blue;
}

::ng-deep .mat-form-field{
    color:red
}

//css @angular\material\prebuilt-themes\purple-green.css in at bottom...

结果如下：

文字不是紫色，背景绿色是好的

Answer 4

Here is some most common properties of angular material v7

/* input color class */
::ng-deep input.mat-input-element {
  color: #484a4c;
}

/* Change label color on focused */
::ng-deep .mat-form-field.mat-focused .mat-form-field-label {
  color: #50d0fb !important;
}

/* underline border color on focused */
::ng-deep .mat-focused .mat-form-field-underline .mat-form-field-ripple{
  background-color: #50d0fb !important;
}

Answer 5

如果您使用的是角形..
添加此

.mat-form-field-empty.mat-form-field-label {
color: green;

}

在'style.css'中，它将起作用