在 Angular/Material 中设置 mat-form-field 输入样式

Question

我有一个带有输入的 mat-form-field，我想向其中添加自定义样式，但是我在 Angular Material 官方网站上找不到任何关于此的文档。

我的最终目标是：

• 选择输入框后更改下划线颜色
• 删除浮动标签（如果可能 - 我知道这是一项功能，但现在已弃用）。

我还不是最擅长 Angular，但是如果需要在 JS 中进行更改，那么我总是可以尽我所能。

我只需要一点指导。

当前代码：

<form class="search-form">
  <mat-form-field class="example-full-width">
    <input class="toolbar-search" type="text" matInput>
    <mat-placeholder>Search</mat-placeholder>
    <mat-icon matSuffix style="font-size: 1.2em">search</mat-icon>
  </mat-form-field>
</form>

当前的 CSS：

// Change text colour when inputting text
.toolbar-search, mat-placeholder {
  color: white;
}

// Changes the underline and placeholder colour before input is selected
/deep/ .mat-input-underline {
    background-color: white;
}

Answer 1

要使用scss更改材质输入的样式：

标准：

::ng-deep .mat-form-field {
    .mat-input-element {
        color: slategray;
    }
    .mat-form-field-label {
        color: slategray;
    }
    .mat-form-field-underline {
        background-color: slategray;
    }
    .mat-form-field-ripple {
        background-color: slategray;
    }
    .mat-form-field-required-marker {
        color: slategray;
    }
}

重点:(选中时）

::ng-deep .mat-form-field.mat-focused {
    .mat-form-field-label {
        color: #ff884d;
    }
    .mat-form-field-ripple {
        background-color: #ff884d;
    }
    .mat-form-field-required-marker {
        color: #ff884d;
    }
    .mat-input-element {
        color: #ff884d;
    }
}

无效：

::ng-deep .mat-form-field.mat-form-field-invalid {
    .mat-input-element {
        color: #ff33cc;
    }
    .mat-form-field-label {
        color: #ff33cc;
        .mat-form-field-required-marker {
            color: #ff33cc;
        }
    }
    .mat-form-field-ripple {
        background-color: #ff33cc;
    }
}

DEMO

您还可以使用ViewEncapsulation.None来避免不推荐使用的 ::ng-deep ：

import { ViewEncapsulation } from '@angular/core';

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

Answer 2

根据我的理解，这两个功能似乎都在MatFormField中。

1. 不推荐使用floatPlaceholder，因为它现在是[floatLabel]的[floatLabel] （ 'never', 'always', 'auto' ），使用输入应用
2. 您可以使用输入[color]更改下划线的[color] ，但是您只能从主题中选择颜色（ 'primary', 'accent', 'warn' ）。 有关如何设置主题的更多信息，请访问他们的网站 ，

<form class="search-form">
  <mat-form-field class="example-full-width"
                  floatLabel="never" color="primary">
    <input class="toolbar-search" type="text" matInput placeholder="search">
    <mat-icon matSuffix style="font-size: 1.2em">search</mat-icon>
  </mat-form-field>
</form>

Answer 3

您可以使用下面使用的css选择器：

/deep/ .mat-input-underline {
   background-color: white;
}

/ deep / combinator计划在Angular中弃用 ，因此最好不要使用它。 不幸的是，Angular Material的.mat-input-underline是高度指定的，这使得很难在不使用/ deep /的情况下覆盖

我发现的最好的方法是使用ID，与默认的Angular Material样式相比，它允许您更高的特异性。

 <form id="search-form" [formGroup]="form" (ngSubmit)="submit()">
    <mat-form-field>
      <mat-placeholder class="placeholder">Search</mat-placeholder>
      <input type="text" class="toolbar-search" matInput formControlName="search">
      <mat-icon matSuffix>search</mat-icon>
    </mat-form-field>

然后，您的“搜索表单”ID可用于定位输入。 您不能在不破坏视图封装的情况下在component.scss中定位mat-form-field-underline。 通过将此添加到global.scss，可以更轻松地在全局级别执行此操作

global.scss：

#search-form {
  .mat-form-field-underline {
    background-color: $accent;
  }
  .mat-form-field-ripple {
    background-color: $accent;
  }
  .placeholder {
    display: none;
  }
}

我希望Angular Material团队在未来能够撤回他们的特异性，因为目前没有简单的方法来覆盖他们的默认值。

Answer 4

这是免费的终极解决方案。

 .mat-form-field input { height: 20px; transition: height ease-in-out 400ms; } .mat-form-field input:focus { background-color: red !important; height: 50px; transition: height ease-in-out 400ms; }

这些用于边框，应在主 style.css 中定义。

 .mat-form-field-outline-start, .mat-form-field-outline-end { border-radius: 0px !important; }

并基于“标准”、“轮廓”和“填充”的外观样式。 您将拥有如下的 CSS 类。

 .mat-form-field-outline {} .mat-form-field-fill {} .mat-form-field-standard {}

要设置所有按钮的样式，您可以使用 mat-button-base 类。

 .mat-button-base { border-radius: 0px !important; }

！重要提示：这些样式应该在主样式文件中定义！ 否则，它们不会应用于元素！