如何在 Angular Material 中更改 mat-form-field 边框颜色 [英] How to change mat-form-field border color in Angular Material

问题描述

我正在尝试更改 Angular Material 中文本框的边框颜色.现在有三种不同的颜色(hover、focus 和 idle).如何更改这些颜色?

I am trying to change the border color for my text box in Angular Material. Right now there are three different colors (for hover, focus, and idle). How can I change these colors?

我希望它们与我的主题不同.

I want them different than my theme.

<mat-form-field id="test" appearance="outline">
  <mat-label class="test2">Outline form field</mat-label>
  <input matInput placeholder="name">
</mat-form-field>

有更改字体大小的选项，但我似乎无法弄清楚颜色:

There are options to change the font size, but I can't seem to figure out the color:

mat-form-field.mat-form-field {
    font-size: 16px;
    color: red;
}

这里的颜色属性没有任何改变.

The color attribute here changes nothing.

推荐答案

你可能已经注意到 mat-form-field 中有两种不同的关于边框的行为.

You may have noticed there are two different behaviours in mat-form-field concerning border.

当您将鼠标悬停在它上面和单击它时(当然，如果您在此之前更改了外观)，它会有一种边框颜色.

It has one border colour when you hover on it and when you click on it (of course if you have changed the appearance before that).

例如，如果您使用:

<mat-form-field class="example-chip-list" [color]="primary" appearance="outline"> </mat-form-field>

当你将鼠标悬停在它上面时，你会看到一种颜色，但是当你点击它时，它的边框颜色将来自:

When you hover over it you will see one colour, but when you click on it the border colour it will take will be from:

[color]="primary"

[color]="primary"

如果您想更改它，请遵循 Angular Material 提供的样式指南.如果您想更改鼠标悬停时的颜色(因为 ::ng-deep 已弃用)，您需要将 ViewEncapsulation 添加到您的组件中:

If you want to change it, follow the guidelines Angular Material provides on styling. If you want to change the colour which is when you hover over it (since ::ng-deep is deprecated) you would need to add ViewEncapsulation into your component:

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

并将以下内容添加到您的样式类:

And add the following to your style class:

.mat-form-field-appearance-outline .mat-form-field-outline-thick {
    color: white;
}

当您将鼠标悬停在元素上时，它会改变元素的颜色.

This will change the colour of the element when you hover over it.

P.S.:如果您还有后缀或前缀元素来覆盖这些颜色，只需添加以下内容:

P.S.: if you have as well a suffix or a prefix element to override those colour just add this:

  mat-form-field.mat-form-field {
    color:white;
  }

P.S.:如果您想在元素未被悬停或触摸时更改边框的颜色，这将有所帮助:

P.S.: if you want to change the colour of the border when the element is not being hovered over or touched this will help:

.mat-form-field-appearance-outline .mat-form-field-outline {
  color: black;
}

更新 2019-05-02:

要更改主要/次要颜色，您可以使用 http://mcg.mbitson.com/#!?mcgpalette0=%233f51b5 生成您自己的并将其应用于主题.

To change the primary/secondary colour you can use http://mcg.mbitson.com/#!?mcgpalette0=%233f51b5 to generate your own and apply it in Theming.

这篇关于如何在 Angular Material 中更改 mat-form-field 边框颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！