首页 文章

更改垫形式字段输入颜色

提问于
浏览 次
0

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

我创建了一个示例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;
}

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

我确信必须有一些方法来改变标签和下划线的颜色而不改变我的应用程序的整个主题 .

css angular angular-material

2 回答

  • 0

    你've almost created it exactly right, you'只是缺少你创建 $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中运行 .

    回复于
  • 1

    您自定义构建的主题完美无缺 . 您只需将自定义文件导入相关文件即可
    component.scss文件，而不是全局导入它 .

    回复于

相关问题