操纵角度材料输入表单样式

Question

我是 Angular 和 Angular Material (AM) 的新手。默认情况下，AM 输入组件 显示调色板的

primary

颜色，直到您单击表单，然后它将

placeholder

值和标记线更改为

accent

颜色。有没有办法操纵表单以便始终显示强调色？换句话说，表单将始终突出显示。问题是我的主要颜色是深色的，并且我的网站页面背景也是深色的，因此，除非用户单击表单，否则

placeholder

和标记线几乎不可见。这也将为我的网站页面增添漂亮的色彩。

这是来自 AM 文档所需 html 的示例：

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

您可以将

color="accent"

添加到

input line

，但同样，颜色仅在用户单击表单时才会出现。

提前谢谢您。

Answer 1

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

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

演示

Answer 2

从

Angular Material 组件 生成的每个 HTML 元素 都会分配一个类 mat-

css 类。它们可用于造型。

您正在谈论的输入组件有一些嵌套元素，因此您必须决定要在哪里应用样式。

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

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

检查生成的 html 以查看更多嵌套元素的类 - 例如

mat-input-element

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

您可以使用下面使用的 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 5

上述解决方案对我不起作用...我知道有角度的材料经常改变它们的类名称和样式。我必须在我的全局 style.css 中执行此操作

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

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

Answer 6

CSS

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

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

HTML

<input matInput class="bg-transparente">

Answer 7

根 styles.css 中的 Angular 15 及以下属性允许控制文本字段的背景

/* Angular 15 adds grey background on mat form components */
/* below removes that background color */
/* Manipulate initial background color*/
  .mdc-text-field--filled:not(.mdc-text-field--disabled) {
     background-color: transparent !important;
 }
/*Manipulate background color on hover and focus*/
 .mat-mdc-form-field-focus-overlay {
       background-color: transparent !important;
}