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

Posted 2023-03-05

【中文标题】在 Angular/Material 中设置 mat-form-field 输入样式

【英文标题】：Styling mat-form-field input in Angular/Material

【发布时间】：2018-07-10 11:12:06

【问题描述】：

我有一个带有输入的 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;

【问题讨论】：

如果你想移除浮动标签，这相当容易，请查看他们的官方文档：material.angular.io/components/form-field/…。关于下划线颜色，您唯一的选择是使用 CSS 进行更改。

完整的应用程序主题指南在这里material.angular.io/guide/theming。基本上，材质应用程序应该有两种主要颜色（原色/重音），下划线将使用主题的原色。希望有帮助

还没有机会查看或尝试一下。我不是不理你，只是有点忙。

【参考方案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
)

【讨论】：

感谢您提供已弃用的信息。帮助很大

【参考方案2】：

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

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

/deep/ 组合器将在 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 团队在未来收回他们的特殊性，因为目前没有简单的方法来覆盖他们的默认值。

【讨论】：

更高的特异性对我有用，但我还需要在我打算设置样式的组件上使用 ViewEncapsulation.None。谢谢！

非常感谢，这对我有用！我还需要添加 ViewEncapsulation :)

【参考方案3】：

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

floatPlaceholder 已弃用，因为现在它是 [floatLabel] for FloatLabelType ('never', 'always', 'auto')，使用输入应用 您可以通过输入[color] 更改下划线的颜色，但是您只能从您的主题中选择颜色 ('primary', 'accent', 'warn')。有关如何设置主题的更多信息，请访问their website here，

<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>