操纵 Angular Material 输入表单样式

Question

我是 Angular 和 Angular Material (AM) 的新手。默认情况下，AM Input Component 显示调色板的 primary 颜色，直到您单击表单，然后它会将 placeholder 值和标记线更改为 accent 颜色。有没有办法操纵表格，以便始终显示强调色？换句话说，表单将始终突出显示。问题是我的原色是深色的，我的网站页面背景也是深色的，因此，除非用户点击表单，否则 placeholder 和标记线几乎不可见。这也将是我网站页面的一个很好的颜色添加。

这是 AM docs 中所需 html 的示例：

<md-input-container>
  <input mdInput placeholder="Favorite food" value="Sushi">
</md-input-container>

您可以将 color="accent" 添加到 input line，但同样，只有在用户单击表单时才会显示颜色。

提前致谢。

Answer 1

从 Angular Material 组件 生成的每个 HTML 元素 得到一个 class mat- css class 分配给它。它们可用于造型。

您所说的输入组件有一些嵌套元素，因此您必须决定要在何处应用样式。

要为整个输入包装器设置样式，请使用：

.mat-input-wrapper {
    background: gray;
}

检查生成的 html 以查看更多嵌套元素的 classes - 例如 mat-input-element

Answer 2

您可以在组件的 css 文件中添加以下内容：

/deep/ .mat-input-underline {
    background-color: #FF0000;    /* replace this color with your accent color hex code */
}

demo

Answer 3

我在调整表单域的宽度时遇到了类似的问题。调查时发现引用 Nehal 答案的答案是正确的，但在最新版本 5.0.0-rcX 中也已弃用，https://angular.io/guide/component-styles。我继续仔细检查我的 CSS 选择器，但发现我需要更改 ViewEncapsulation。

对我有用的是我的 css/scss 文件（当然可以根据需要使用您自己的选择器进行修改）：

mat-input-container {
    // Your CSS here
}

在我的组件 ts 文件中：

@Component({
    selector: 'my-component-selector',
    templateUrl: './my-component.component.html',
    styleUrls: ['./my-component.component.scss'],
    encapsulation: ViewEncapsulation.None
})

如果不更改封装，CSS 选择器将不会被应用。

祝你好运！

Answer 4

上述解决方案对我不起作用...我知道 angular material 经常更改其 class 名称和样式。我必须在我的全局 style.css

中执行此操作

.mat-form-field-underline {
  background-color: rgb(177, 140, 81) !important;
}

.mat-form-field-underline.mat-disabled {
  background-color: transparent !important;
}

Answer 5

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

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

/deep/ 组合器计划在 Angular 中弃用，因此最好不要使用它。不幸的是，来自 Angular Material 的 .mat-input-underline 是高度指定的，这使得不使用 /deep/

很难覆盖

我发现的最佳方法是使用 ID，与默认 Angular Material 样式相比，它可以让您具有更高的特异性。

<form id="food-form" [formGroup]="form" (ngSubmit)="submit()">
  <mat-input-container>
    <input matInput placeholder="Favorite food" value="Sushi">
  </mat-input-container>

然后，您的 'food-form' ID 可用于在 global.scss 文件中定位此表单。在不破坏视图封装的情况下，无法从 component.scss 中定位它。如果您不使用 /deep/，则必须在全局级别更改 .mat-form-field-underline。波纹是选择输入时使用的颜色。

#food-form {
  .mat-form-field-underline {
    background-color: $accent;
  }
  .mat-form-field-ripple {
    background-color: $accent;
  }
}

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

Answer 6

CSS

input[class~="bg-transparente"] {
  background-color: transparent;
}

并在您的输入中执行此操作

HTML

 <input matInput class="bg-transparente">

操纵 Angular Material 输入表单样式

Manipulating Angular Material Input Form Styling

angular-material2

angular