Question

我正在研究角材料无论如何，我可以在不创建新主题文件的情况下更改垫子输入表单的颜色吗？我现在正在运行一个深紫色的主题。我只想将原色的颜色更改为深绿色，而不是默认的紫色。

我创建了一个示例scss文件，但是由于它是基本文件，所以我丢失了预建主题附带的所有图形功能。

这就是我所拥有的

@import '~@angular/material/theming';
@include mat-core();

  $primary: mat-palette($mat-green,200);
  $accent: mat-palette($mat-red,200);

  $theme: mat-light-theme($primary, $accent);

@include angular-material-theme($theme);

这是我在预制主题中的输入表单

<mat-form-field class="a">
<input matInput placeholder="Search" style="display:inline; width:200px">
</mat-form-field>

Css文件

.a{
  color:#129D90;
}

这会更改输入字段的字体，但不会更改下划线和表单标签的颜色。

我确信必须有某种方法可以更改标签和下划线的颜色，而无需更改应用程序的整个主题。

Answer 1

您定制的主题效果很好。您只需要将自定义文件导入相关的
component.scss文件，而不是全局导入。

Answer 2

您几乎完全正确地创建了它，只是缺少了创建$mat-green和$mat-red的部分，就像这样：

$mat-green: (
    50 : #f2f8ef,
    100 : #dfedd8,
    200 : #c9e2be,
    300 : #b3d6a4,
    400 : #a3cd91,
    500 : #93c47d,
    600 : #8bbe75,
    700 : #80b66a,
    800 : #76af60,
    900 : #64a24d,
    A100 : #ffffff,
    A200 : #daffcd,
    A400 : #b4ff9a,
    A700 : #a1ff80,
    contrast: (
        50 : #000000,
        100 : #000000,
        200 : #000000,
        300 : #000000,
        400 : #000000,
        500 : #000000,
        600 : #000000,
        700 : #000000,
        800 : #000000,
        900 : #000000,
        A100 : #000000,
        A200 : #000000,
        A400 : #000000,
        A700 : #000000,
    )
);

$mat-red: (
    50 : #f9e0e0,
    100 : #f0b3b3,
    200 : #e68080,
    300 : #db4d4d,
    400 : #d42626,
    500 : #cc0000,
    600 : #c70000,
    700 : #c00000,
    800 : #b90000,
    900 : #ad0000,
    A100 : #ffd7d7,
    A200 : #ffa4a4,
    A400 : #ff7171,
    A700 : #ff5858,
    contrast: (
        50 : #000000,
        100 : #000000,
        200 : #000000,
        300 : #ffffff,
        400 : #ffffff,
        500 : #ffffff,
        600 : #ffffff,
        700 : #ffffff,
        800 : #ffffff,
        900 : #ffffff,
        A100 : #000000,
        A200 : #000000,
        A400 : #000000,
        A700 : #000000,
    )
);

看到它在此StackBlitz Demo中运行。

更改垫子表单字段输入颜色

2 个答案: